title: Parent's data change does not update child component in vuejs
body: <p>I have the following:</p>
  
  <pre><code>Vue.component('times-updated', {
      template: '&lt;span&gt;Times Updated: {{ timesUpdated }}&lt;/span&gt;',
      data: function() {
          return {
              timesUpdated: this.$parent.myData.timesUpdated
          }
      }
  });
  
  
  var vm = new Vue({
      el: '#test',
      data: function() {
          return {
              myData: {}
          }
      }
  })
  
  setInterval(function(){
      $.ajax({
          url: `${window.location.href}/json`, // This just returns an array : array.timesUpdated: 2 etc
      }).done(function (data) {
          vm.myData = data; // changes this data
      });
  }, 1000)
  </code></pre>
  
  <p>and am using the following html:</p>
  
  <pre><code>&lt;div class="test"&gt;  
      &lt;times-updated&gt;&lt;/times-updated&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I poll a REST API that returns an array which includes a timesUpdated property:</p>
  
  <pre><code>{
      timesUpdated: 5
  }
  </code></pre>
  
  <p>My intention is that every second I use jQuery's <code>$.ajax</code> method to call the API, update the <code>myData</code> data object on <code>vm</code>, which would then update the <code>times-updated</code> component. </p>
  
  <p>The code works on initial page load, the <code>times-updated</code> component can retrieve the value on its parent's <code>myData</code> property, but whilst I have confirms that <code>vm.myData</code> does reflect the new value from the API, the component doesn't update its display to show the new count.</p>
  
  <p>What am i doing wrong?</p>