title: Vue.js - How to properly watch for nested data
body: <p>I'm  trying to understand how to properly watch for some prop variation.
  I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;player v-for="(item, key, index) in players"
              :item="item"
              :index="index"
              :key="key""&gt;
          &lt;/player&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>... then inside <code>&lt;script&gt;</code> tag:</p>
  
  <pre><code> data(){
       return {
           players: {}
   },
   created(){
          let self = this;
          this.$http.get('../serv/config/player.php').then((response) =&gt; {
              let pls = response.body;
              for (let p in pls) {
                  self.$set(self.players, p, pls[p]);
              }
      });
  }
  </code></pre>
  
  <p>item objects are like this:</p>
  
  <pre><code>item:{
     prop: value,
     someOtherProp: {
         nestedProp: nestedValue,
         myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
      },
  }
  </code></pre>
  
  <p>Now, inside my child "player" component I'm trying to watch for any Item's property variation and I use:</p>
  
  <pre><code>...
  watch:{
      'item.someOtherProp'(newVal){
          //to work with changes in "myArray"
      },
      'item.prop'(newVal){
          //to work with changes in prop
      }
  }
  </code></pre>
  
  <p>It works but it seems a bit tricky to me and I was wondering if this is the right way to do it. My goal is to perform some action every time <code>prop</code> changes or <code>myArray</code> gets new elements or some variation inside existing ones. Any suggestion will be appreciated.</p>