Vuejs mount the child components only after data has been loaded : <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>
