title: Array watch with Vue.js 2
body: <p>I'm having a set of selects (item.pricelists that are assigned to an item) rendered in a v-for loop and bound with v-model. Possible select options for that item are rendered with another v-for from item.valid_pricelists. Both are pulled from the server in the same array.
  Now I need to watch for when user changes selection , so i can update the item.pricelists array with new values from item.valid_pricelists.</p>
  <p>Render part :</p>
  <pre><code>&lt;div v-for=&quot;(row,index) in item.pricelists&quot;&gt;
      &lt;select v-model=&quot;row.id&quot;&gt;
          &lt;option :value=&quot;price_list.id&quot;  v-for=&quot;price_list in item.valid_pricelists&quot;&gt;
          {{price_list.description}}
          &lt;/option&gt;
      &lt;/select&gt;
      Parent pricelist : {{row.parent_id}}
  &lt;/div&gt;
  </code></pre>
  <p>Watch part :</p>
  <pre><code>watch:{
      'item.pricelists.id': {
          handler: function (val,oldVal) {
              console.log(val + &quot; - &quot; + oldVal);
          }, deep:true}
  }
  </code></pre>
  <p>Now, watch - that works just fine for simple vars - refuses to budge.</p>
  <p>Here's the <a href="https://jsfiddle.net/0ch96dwe/2/" rel="nofollow noreferrer">fiddle</a> with relevant part of the code.</p>
  <p>I was looking at the vue <a href="https://v2.vuejs.org/v2/api/#watch" rel="nofollow noreferrer">docs</a>, but can't wrap my head around it. Any help would be appreciated.</p>