vue interpolated value not updating - vue.js

Question

I'm using Vue JS 2.0 and this is a table I'm trying to display. Everything displays properly initially but when I update(in a method called editPlayerStat) editedPlayers[any-Player-Id], it doesn't update the interpolated value in the respective small tag.
At the editPlayerStat() I check to see if editedPlayers[any-Player-Id] is changing properly and it is. But for some reason it isn't getting updated in the small tag. Also, in the span tag's v-if doesn't update and has the same problem.
While in the same method editPlayerStat(), I manually update player.stats.month.goals you see interpolated, to see if also has the same problem and IT DOESN'T. It works just fine.
What am I doing wrong?
<tr v-if="showMonth" v-for="player in players">
<td><input type="checkbox"></td>
<td>{{ player.name }}</td>
<td><a #click.prevent="editPlayerStat(player._id,'goals',false)" href=""><i class="fa fa-arrow-down"></i></a>
{{ player.stats.month.goals }}
<a #click.prevent="editPlayerStat(player._id,'goals',true)" href=""><i class="fa fa-arrow-up"></i></a>
<span id="changed"> <small>({{ editedPlayers[player._id].stats.goals }})</small></span>
</td>
<td><a #click.prevent="editPlayerStat(player._id,'assists',false)" href=""><i class="fa fa-arrow-down"></i></a>
{{ player.stats.month.assists }}
<a #click.prevent="editPlayerStat(player._id,'assists',true)" href=""><i class="fa fa-arrow-up"></i></a>
<span id="changed" v-if="editedPlayers[player._id].stats.assists > 0"> <small>({{ editedPlayers[player._id].stats.assists }})</small></span>
</td>
</tr>
This is my editPlayerStat() method:
editPlayerStat(id, type, isIncrease) {
console.log('editPlayerStat...');
console.log('editedPlayers[player._id].stats.goals...' + this.editedPlayers[id].stats.goals );
if(isIncrease) {
console.log('increase');
this.editedPlayers[id].stats[type]++;
this.editedPlayers[id].isEdited = true;
} else if(!isIncrease && this.editedPlayers[id].stats[type] > 0) {
console.log('decrease');
this.editedPlayers[id].stats[type]--;
this.editedPlayers[id].isEdited = true;
}
}
ANOTHER instance:
I use v-model on an input and display the interpolated value beside and it updates just fine when I update the input tag value. But when I 'watch' for changes in the object player, the watch function doesn't run except for the first time.
<input class="form-control" id="name" placeholder="Name" type="text" v-model="player.name">{{ player.name }}
watch: {
player: function(player) {
console.log('from watch... '+JSON.stringify(player));
}
},
methods: {
getPlayerInfo() {
var vm = this;
axios.get('http://localhost:3000/admin/players/info/'+'5847a093a5e13203a4d0455f')
.then(function (response) {
vm.player = response.data;
console.log(response);
console.log(JSON.stringify(vm.player));
console.log('showForm: ' + vm.showForm);
})
.catch(function (error) {
console.log(error);
});
},
created: {
this.getPlayerInfo();
}
Output:
Object { data: Object, status: 200, statusText: "OK", headers: Object, config: Object, request: XMLHttpRequest }
{"_id":"5847a093a5e13203a4d0455f","name":"Michael","age":25,"dateOfBirth":"03-04-1998","phone":7987997799,"image":"imgur::djnwkndkjnkn","preferredFoot":"Right","isActive":true,"positions":["CB","RB","RW"]}
showForm: true
from watch... {"_id":"5847a093a5e13203a4d0455f","name":"Michael","age":25,"dateOfBirth":"03-04-1998","phone":7987997799,"image":"imgur::djnwkndkjnkn","preferredFoot":"Right","isActive":true,"positions":["CB","RB","RW"]}
As you can see, even though the interpolated player.name is updated when I edit the value in the input tag, the watch function for player property doesn't run except for that first time when player was initialized with an Object.

Answer 1

Thanks to #vbranden and participants in an issue I raised here. So here's what was going wrong.
I was running into this behavior in Vue 2.0, which according to the documentation, "cannot detect property addition or deletion". You will run into this sooner or later.
The thing was that, I was adding properties to an Object directly (or as I thought 'string indexed array' values to an array. Note: also see issue; javascript doesn't allow associative arrays) and Vue couldn't watch for changes in it due to this caveat.
Solution: Instead of directly assigning properties to an Object, you need to use Vue.set() or this.$set() to assign them. This allows Vue to track for changes in them.
Original Problem: fiddle
editedPlayers: []
this.editedPlayers['someID'] = { name: 'John', stats: { goals: 10, assists: 10 }};
this.editedPlayers['someOtherID'] = { name: 'Flint', stats: { goals: 10, assists: 10 }};
Solution: fiddle
editedPlayers: {}
Vue.set(this.editedPlayers, 'someID', { name: 'John', stats: { goals: 10, assists: 10 }});
Vue.set(this.editedPlayers, 'someOtherID', { name: 'Flint', stats: { goals: 10, assists: 10 }});