添加新值时，Vue.js数据值不会更新

Question

设置新条形值时，不会更新数据。请在下面查看;

我打算做动态栏和按钮。单击按钮后，新值将更新为条形值。

这是the link

HTML

<h1><span>Vue.js</span> Progress Bar</h1>
<div id="app">
  <div v-for="(index, bar) in bars" class="shell">
    <div class="bar" :style="{ width: bar + '%' }" .>
      <span>{{ bar }}%</span>
      <input type="radio" id="radio-bar" value="{{ index }}" v-model="picked" v-on:change="set(index)">
    </div>
  </div>
  <span v-for="(index, button) in buttons">
    <button value="{{ button }}" @click.prevent="makeProgress(button)">{{ button }}</button>
  </span>
  <br>
  <p>Selected Bar: {{ picked }}</p>
  <p>Button Value: {{ buttonVal }}</p>
</div>

JS

var dataURL = 'http://pb-api.herokuapp.com/bars';
var vm = new Vue({
  el: "#app",
  data: {
    maxColor: "#F22613",
    bars: [],
    buttons: [],
    limit: 0,
    selectedBar: 0,
    buttonVal: 0
  },
  methods: {
    fetchData: function(params) {
      this.$http.get(dataURL, function(data) {
        this.$set('bars', data.bars);
        this.$set('buttons', data.buttons);
        this.$set('limit', data.limit);
        console.log(params);
      });
    },
    set: function(index) {
      this.selectedBar = index;
    },
    makeProgress: function(button) {
      var self = this;
      self.buttonVal += button;
      this.reachMax();
            Vue.set(this.bars, 0, 55);
    },
    reachMax() {
    if(this.buttonVal >= this.limit){
    alert('Reached Limit' + this.limit)
    }
    }
  },
  created: function() {
    this.fetchData();
  }
});