Error: Array updating - Vue JS

https://vuejs.org/v2/guide/list.html#Caveats

HTML

<script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>
<div id="app">
  {{ title }}
  <br><br>
  <div v-if="showNow">
  <a @click.prevent="editPlayerStat('someID','goals',false)" href="">Decrease</a>
       | <span id="changed">{{ editedPlayers['someID'].stats.goals }}</span> |
  <a @click.prevent="editPlayerStat('someID','goals',true)" href="">Increase</a>
  </div>
  <br><br>
  <button type="button" @click.prevent="refresh">Refresh</button>
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
  	title: 'Hello Hola!',
    showNow: false,
    editedPlayers: {},
  },
  methods: {
  	doFirst: function() {
    	console.log('doFirst.....');
    	Vue.set(this.editedPlayers, 'someID', { name: 'John', stats: { goals: 10, assists: 10 }});
      Vue.set(this.editedPlayers, 'someOtherID', { name: 'Flint', stats: { goals: 10, assists: 10 }});
      console.log('someID.....' + this.editedPlayers['someID']);
      this.showNow = true;
    },
    editPlayerStat: function(id, type, isIncrease) {
    	if(isIncrease) {
      	this.editedPlayers[id].stats[type]++;
        console.log('increasing... this.editedPlayers['+id+'].stats.'+type+' is now  ' + this.editedPlayers[id].stats[type]);
      } else {
      	this.editedPlayers[id].stats[type]--;
        console.log('decreasing... this.editedPlayers['+id+'].stats.'+type+' is now  ' + this.editedPlayers[id].stats[type]);
      }
    },
    refresh: function() {
     this.showNow = false;
     this.showNow = true;
    }
  },
  created: function() {
  	this.doFirst();
  }
});