Vue.js data value not updating when adding new value - vue.js

Question

When new bars value are set, the data is not updated. Please check below;
I'm planning to do dynamic bars and buttons. Once the buttons are clicked, the new values will be updated to bars values.
Here is 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();
}
});