title: Vue props data not updating in child component
body: <p>Hi everyone I just want some explanation about vue props data. So I'm passing value from parent component to child component. The thing is when parent data has data changes/update it's not updating in child component.</p>
  
  <pre><code>Vue.component('child-component', {
    template: '&lt;div class="child"&gt;{{val}}&lt;/div&gt;',
    props: ['testData'],
    data: function () {
      return {
          val: this.testData
      }
    }
  });
  </code></pre>
  
  <p>But using the props name <strong><em>{{testdata}}</em></strong> it's displaying the data from parent properly</p>
  
  <pre><code>Vue.component('child-component', {
    template: '&lt;div class="child"&gt;{{testData}}&lt;/div&gt;',
    props: ['testData'],
    data: function () {
      return {
          val: this.testData
      }
    }
  });
  </code></pre>
  
  <p>Thanks in advance</p>
  
  <p>Fiddle <a href="https://jsfiddle.net/PenAndPapers/waqb81fy/17/" rel="nofollow noreferrer">link</a></p>