[Vuejs]-Vue not rendering my data

It behaves as expected here, where I’ve switched out the getJSON for a setTimeout doing the same assignment.

Vue.component('feedback-table', {
  template: '#grid-template',
  data: function() {
    return {
      chancesOfApproval: [],
    }
  },
  created: function() {
    /*
    $.getJSON('/getFeedbackQuestionsAndChances', function(data) {
      this.chancesOfApproval = data.chancesOfApproval;
    }.bind(this));
    */
    setTimeout(() => {
      this.chancesOfApproval = [{
        position: 1
      }, {
        position: 2
      }];
    }, 500);
  },


});

new Vue({
  el: '#feedback-wrapper',
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<template id="grid-template">

  <table class="table table-bordered table-responsive table-striped">
    <tr v-for="entry in chancesOfApproval">
      <td>@{{ entry.position }}</td>
    </tr>
  </table>
</template>

<div id="feedback-wrapper">
  <feedback-table></feedback-table>
</div>

You are using function.bind(this) to bring this from outer scope to the function scope, in your $http success handler.

Have you checked if it is not creating any issues? I am not aware of how bind is implemented. Maybe it is not allowing Vue to trigger its Reactivity System.

If you see values in console as a plain JSON object, then it is probably wrong. Vue.js modifies object params to getters / setters / observers so that it can bind to the DOM.

Alternatively, why dont you try the arrow function or using a self variable, just to see if it solves the issue?

Arrow function (ES6 and above):

created:function(){
    $.getJSON('/getFeedbackQuestionsAndChances',data => {
        this.chancesOfApproval = data.chancesOfApproval;
    });
}

Or use a local variable:

created:function(){
    var self = this;  // self points to this of Vue component
    $.getJSON('/getFeedbackQuestionsAndChances',function(data){
        self.chancesOfApproval = data.chancesOfApproval;
    });
}

Another note: instead of setTimeout(), you also have the option of Vue.nextTick() as follows:

Vue.nextTick(function () {
  // DOM updated
})

or in your case:

this.$nextTick(function () {
  // DOM updated
})