title: Vuejs mount the child components only after data has been loaded
body: <p>What am trying to achieve is to pass data as props in my children components but this data is loaded from the server so it takes a while to load.</p>
  
  <p>I would now like to only mount the children components when the data is fully loaded</p>
  
  <p>SO currently am doing this</p>
  
  <p>IN the parent component</p>
  
  <pre><code>&lt;template&gt;
    &lt;child-cmp :value="childdata"&gt;&lt;/child-cmp&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default{
      data(){
         childdata : [];
       },
  
       methods:{
        fetchINitData(){
          //fetch from server then
           this.childdata = res.data.items;
           console.log(res.data.items) //has some values
  
         }
  
       }
  
  
     components:{
       childcmp
      },
  
     mounted(){
       this.fetchINitData();
  
  
       }
      }
   &lt;/script&gt;
  </code></pre>
  
  <p>NOw in my child component</p>
  
  <pre><code>&lt;script&gt;
  export default{
     props:["value];
  
      mounted(){
        console.log(this.value) //this is always empty
       } 
  
       }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>As from the above example the data passed as props is always empty on the children component. How do i only mount the child component after data has been received or how do i ensure that the childs component get the latest data changed.</p>