title: Vue.js 2 Watch not work on props updates from another component
body: <p>i've tried to <code>watch</code> my props. The purpose is, i want to get <code>newValue</code> and <code>oldValue</code> from this props, but its not work as usual. Is it because the props change in another component?? causing <code>watch</code> to malfunction?</p>
  <p>so this is my props</p>
  <pre><code>countryId: { type: String, default: &quot;&quot; }
  </code></pre>
  <p>this is my <code>watch</code> props</p>
  <pre><code>watch: {
    countryId: function(newCountry, oldCountry) {
      console.log(&quot;New =&gt; &quot;, newCountry, &quot;Old =&gt; &quot;, oldCountry)
    }
  }
  </code></pre>
  <p>and this is where the props value is obtained</p>
  <pre><code>SearchCountry(
    :countryId=&quot;(country ? country.country_code : '')&quot;
    :key=&quot;(country ? country.country_code : '')&quot;
  )
  </code></pre>
  <p>and i was tried like this.. its work, but its just return <code>newValue</code></p>
  <pre><code>watch: {
     countryId: {
       deep: true,
       immediate: true,
       handler: function(newCountry, oldCountry) {
         console.log(&quot;New =&gt; &quot;, newCountry, &quot;Old =&gt; &quot;, oldCountry)
       }
     }
  },
  </code></pre>
  <p>from console <code>New =&gt;  GQ Old =&gt;  undefined</code></p>