title: Access api data in child component on ready with Vue.js
body: <p>I've working on a big application and I'm having a lot of trouble dealing with data from my API and passing it onto my child components.</p>
  
  <p><strong>The situation.</strong></p>
  
  <p>I'm calling my API from the parent component and passing the data through a prop to my child component. The child component displays the data just fine, but I'm not able to access the data within the ready function in my child component.</p>
  
  <p>Take a look: <a href="https://jsfiddle.net/kmrfkynf/3/">https://jsfiddle.net/kmrfkynf/3/</a></p>
  
  <p>As you can see in the console, displaying the data within the child components ready function gives me a empty object...</p>
  
  <pre><code>ready: function(){
      console.log('items from child component', this.items);
  }
  </code></pre>
  
  <p>... but the child components renders the object just fine within my repeat.</p>
  
  <p>So the problem is that the child component is rendered before the API call from the parent is complete. When its complete, it syncs the data to my child component, thus rendering just fine. </p>
  
  <p><strong>What I've tried</strong></p>
  
  <p>Watching the prop from within my child component. When the prop is 'complete' I can access it. But this gives me lots of problems when trying to modify some data in the prop, because it renders every time. This is not the solution I want.</p>
  
  <p><strong>The question</strong></p>
  
  <p>How can I make sure that the prop is filled when the child component is ready? </p>