Vue-深入观察对象阵列并计算变化？

我有一个称为people包含对象的数组，如下所示：

之前

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

它可以更改：

后

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

请注意，弗兰克刚满33岁。

我有一个应用程序，我试图在其中查看人员数组，并且当任何值更改时，然后记录更改：

<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>

我基于昨天问过的有关数组比较的问题，选择了最快的工作答案。

因此，目前我希望看到以下结果： { id: 1, name: 'Frank', age: 33 }

但是我在控制台中得到的只是（记住我在组件中拥有它）：

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

在我制作的Codepen中，结果是一个空数组，而不是更改的对象，这正是我所期望的。

如果有人能说明为什么发生这种情况或我在这里出了问题，那么将不胜感激，非常感谢！