title: VueJS - Update Parent Data After Ajax
body: <p>I'm trying out VueJS, with the aim of incrementally updating a jQuery project, but I'm having issues with props in a child component passed through data from a parent component.</p>
  <p>My parent component is</p>
  <pre><code>// parent_component.js
  var parentData = {};
  var parentComponent = Vue.component('parentComponent', {
      data: function() {
          return {
              parentData: _parentData
          }
      },
      delimiters: ['((', '))']
  })
  
  $.ajax({
     url: '/someUrl/',
     success: function(response) {
        _parentData = response
     }
  </code></pre>
  <p>My Child component is:</p>
  <pre><code>// child_component.js
  Vue.component('child-component', {
      template: '&lt;div&gt;((data.someProp))&lt;/div&gt;'
      props: ['data'],
      delimiters: ['((', '))']
  })
  </code></pre>
  <p>My HTML is:</p>
  <pre><code>// index.html
  &lt;parent-component inline-template&gt;
       &lt;child-component v-bind:data=&quot;parentData&quot;&gt;&lt;/child-component&gt;
  &lt;/parent-component&gt;
  </code></pre>
  <p>This all works fine when I update <code>_parentData</code> right after initializing the childComponent. But I actually need to do an Ajax call and update the _parentData, it is not updated in the childComponent.<br />
  Nb. I checked that the _parentData object is there in the callback of the Ajax call.<br />
  Also, I tried putting the Ajax call in the <code>created</code> option of the childComponent, but this didn't help.</p>
  <p>What am I missing?</p>
  <p><strong>Update</strong></p>
  <p>I guess I made the classic beginner's mistake! As stated <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats" rel="nofollow noreferrer">here</a>, <code>Vue cannot detect property addition</code>. So I need to define the <code>someProp</code> property on the _parentData before making the async call.</p>
  <p>So if I define <code>var parentData = { someProp: '' };</code> it will work.</p>
  <p>See this fiddle: <a href="https://jsfiddle.net/maaikeb/anr1e88n/" rel="nofollow noreferrer">https://jsfiddle.net/maaikeb/anr1e88n/</a></p>