让我们讨论如何正确观察道具变化，看看哪种方法适合情况。

我们可以使用深度观察器，但是，它会检测对 item 数组中对象的任何更改以及对数组的添加：

watch: {
  item: {
     handler(val){
       //do stuff
     },
     deep: true
  }
}

其中我们应该在查看数组或者对象时将 deep 设置为 true，以告诉 Vue 应该查看嵌套数据的更改。

要不监视顶级对象上的每一个变化，只需监视一个计算，而不是：

const app = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

Watched props 有时会与计算属性混淆，因为它们以相同的方式运行。
要更改状态，我们应该使用计算道具。
使用 watch 更新状态可能很危险，因为组件和父组件都在更新相同的状态（直接和间接）。