title: Vue - Deep watching an array of objects and calculating the change?
body: <p>I have an array called <code>people</code> that contains objects as follows:</p>
  
  <p><strong>Before</strong></p>
  
  <pre><code>[
    {id: 0, name: 'Bob', age: 27},
    {id: 1, name: 'Frank', age: 32},
    {id: 2, name: 'Joe', age: 38}
  ]
  </code></pre>
  
  <p>It can change:</p>
  
  <p><strong>After</strong></p>
  
  <pre><code>[
    {id: 0, name: 'Bob', age: 27},
    {id: 1, name: 'Frank', age: 33},
    {id: 2, name: 'Joe', age: 38}
  ]
  </code></pre>
  
  <p>Notice Frank just turned 33.</p>
  
  <p>I have an app where I am trying to watch the people array and when any of the values changes then log the change:</p>
  
  <pre><code>&lt;style&gt;
  input {
    display: block;
  }
  &lt;/style&gt;
  
  &lt;div id="app"&gt;
    &lt;input type="text" v-for="(person, index) in people" v-model="people[index].age" /&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  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
      }
    }
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>I based this on the <a href="https://stackoverflow.com/questions/41122068/compare-two-arrays-containing-objects-in-order-to-calculate-what-changed">question that I asked yesterday</a> about array comparisons and selected the quickest working answer.</p>
  
  <p>So, at this point I expect to see a result of: <code>{ id: 1, name: 'Frank', age: 33 }</code></p>
  
  <p>But all I get back in the console is (bearing in mind i had it in a component): </p>
  
  <pre><code>[Vue warn]: Error in watcher "people" 
  (found in anonymous component - use the "name" option for better debugging messages.)
  </code></pre>
  
  <p>And in the <a href="http://codepen.io/craigvantonder/pen/RoeJQK" rel="noreferrer">codepen that I made</a>, the result is an empty array and not the changed object that changed which would be what I expected.</p>
  
  <p>If anyone could suggest why this is happening or where I have gone wrong here then it would be greatly appreciated, many thanks!</p>