[解決済み] Vue.js - ネストされたデータを適切に監視する方法

質問

私は、いくつかのプロップのバリエーションを適切に監視する方法を理解しようとしています。 私は親コンポーネント（.vueファイル）を持っていて、ajax呼び出しからデータを受け取り、オブジェクト内にデータを入れて、v-forディレクティブを通していくつかの子コンポーネントをレンダリングするためにそれを使用して、以下に私の実装を簡略化しています。

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

...そして、その内側には <script> タグを使用します。

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

アイテムオブジェクトはこんな感じです。

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

今、私の子"player"コンポーネント内部では、私は任意のItemのプロパティの変化を監視しようとしていると私は使用しています。

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to work with changes in prop
    }
}

動作はするのですが、私には少しトリッキーに感じられ、この方法が正しいのかどうか疑問に思っていました。私の目標は prop が変更されるか myArray は、新しい要素または既存の要素内の何らかのバリエーションを取得します。何かご提案いただければ幸いです。

解決方法は？

を使用することができます。 ディープウォッチャー を使用します。

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

のオブジェクトに対するあらゆる変更を検出するようになります。 item 配列への追加と、配列自体への追加(例えば Vue.set ). 以下はJSFiddleです。 http://jsfiddle.net/je2rw3rs/

EDIT

トップレベルのオブジェクトのすべての変更を監視する必要がなく、ネストされたオブジェクトを直接監視するための厄介でない構文が必要な場合、単純に computed の代わりに

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

以下は、JSFiddleです。 http://jsfiddle.net/oa07r5fw/