title: Vue.js props watch not working
body: <p>Consider following trivial app:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;counters :counter1="counter1" :counter2="counter2"&gt;
    &lt;/counters&gt;
    &lt;button @click="onClick"&gt;Click Here&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>Vue.component('counters', {
    template: '&lt;h1&gt;{{counter1.count}} {{counter2.count}}&lt;/h1&gt;',
    //template: '&lt;h1&gt;{{count1}} {{count2}}&lt;/h1&gt;',
    props: {
      'counter1': {
        type: Object
      },
      'counter2': {
        type: Object
      }
    },
    data: function() {
      return {
        'count1': 0,
        'count2': 0,
      }
    },
    watch: {
      counter1: function(n, o) {
        console.log(JSON.stringify(n));
        this.count1 = n.count;
      },
      counter2: function(n, o) {
        console.log(JSON.stringify(n));
        this.count2 = n.count;
      }
    }
  });
  
  
  var vm = new Vue({
    el: '#app',
    data: {
      counter1: {
        count: 0
      },
      counter2: {
        count: 0
      }
    },
    methods: {
      onClick: function() {
        this.counter1.count++;
        this.counter2.count++;
      }
    }
  });
  </code></pre>
  
  <p>"counters" expects two props counter1 and counter2 , both objects. The properties counter1.count and counter2.count are used directly in template.
  On clicking the button both counters are incremented by one. This works flawlessly as can be seen here: <a href="https://jsfiddle.net/kargirwar/4829j22n/29/" rel="noreferrer">jsfiddle</a></p>
  
  <p>However I wanted to use "watch" for updating the counters. So I defined reactive properties count1 and count2 and updated them whenever counter1 and counter2 changed. For some reason this does not work. I was under impression both approaches should yield the same result although using watch is less efficient. But probably I am missing something here. Can you explain? </p>