Vue de Profondeur en regardant un tableau d'objets et de calculer le changement?

J'ai un tableau appelé people qui contient des objets comme suit:

Avant

[
  {id: 0, name: 'Bob', age: 27},
  {id: 1, name: 'Frank', age: 32},
  {id: 2, name: 'Joe', age: 38}
]

Il peut changer:

Après

[
  {id: 0, name: 'Bob', age: 27},
  {id: 1, name: 'Frank', age: 33},
  {id: 2, name: 'Joe', age: 38}
]

Avis Frank vient d'avoir 33.

J'ai une appli où je suis en train de regarder les gens tableau et lorsque l'une des valeurs les modifications, puis du journal le changement:

<style>
input {
  display: block;
}
</style>

<div id="app">
  <input type="text" v-for="(person, index) in people" v-model="people[index].age" />
</div>

<script>
new Vue({
  el: '#app',
  data: {
    people: [
      {id: 0, name: 'Bob', age: 27},
      {id: 1, name: 'Frank', age: 32},
      {id: 2, name: 'Joe', age: 38}
    ]
  },
  watch: {
    people: {
      handler: function (val, oldVal) {
        //Return the object that changed
        var changed = val.filter( function( p, idx ) {
          return Object.keys(p).some( function( prop ) {
            return p[prop] !== oldVal[idx][prop];
          })
        })
        //Log it
        console.log(changed)
      },
      deep: true
    }
  }
})
</script>

J'ai basé cette sur le la question que j'ai posée hier à propos de la matrice de comparaisons et choisis le moyen le plus rapide de travail la réponse.

Donc, à ce stade, je m'attends à voir un résultat de: { id: 1, name: 'Frank', age: 33 }

Mais tout ce que je rentre dans la console (en gardant à l'esprit que je l'ai eu dans un composant):

[Vue warn]: Error in watcher "people" 
(found in anonymous component - use the "name" option for better debugging messages.)

Et dans le codepen que j'ai fait, le résultat est un tableau vide et non pas de l'objet modifié qui a changé, qui serait ce à quoi je m'attendais.

Si quelqu'un pourrait suggérer pourquoi ce qui se passe ou où je suis allé mal ici, alors il serait grandement apprécié, merci beaucoup!