Vue.js：配列の中のオブジェクトの値をリアクティブに変更

こんな感じにVue.setを用います：

<div id='app'>
  <ul>
    <li v-for="artist in artists">{{artists.firstname}} {{artists.lastname}} {{artists.age}}</li>
  </ul>
  <form>
    <input type="button" value="年齢を5際、若くする" v-on:click="reduceAge"/>
  </form>
</div>

var app = new Vue({
  el: '#app',
  data: {
    artists: [
      { lastname: 'セザンヌ', firstname: 'ポール', age: 67 },
      { lastname: 'マティス', firstname: 'アンリ', age: 84 },
    ]
  },
  computed: {
  },
  methods: {
    reduceAge: function() {
      for(i=0,j=this.artists.length; i<j; i++){
        originalAge = this.artists[i].age;
        reducedAge  = originalAge - 5;
        Vue.set(this.artists[i], 'age', reducedAge);
      }
    }
  }
});