title: how to make the nuxt child component wait until asyncData call get finish
body: <p>For a form we have 2 components parent(for calling asyncdata and pass data as props to child) &amp; child(form). I can properly fetch the props in child if I navigate using a link. But If I try to refresh the child component page it throws error as no props is passed. Found the reason to be that the parents asyncdata is not completing before the child render to sent the data in props.</p>
  
  <blockquote>
    <p>Parent Component</p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;p&gt;EDIT&lt;/p&gt;
      &lt;NewListingModal :is-edit="true" :form-props="this.form" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    import NewListingModal from '@/components/NewListingModal.vue'
  
    export default {
      components: { NewListingModal },
      async asyncData({ params, store }) {
        const listing = await store.$db().model('listings').find(params.listing)  //vuexorm call
        if (typeof listing !== 'undefined') {
          const convertedListing = JSON.parse(JSON.stringify(listing))
          return {
            name: '',
            scrollable: true,
            form: {names: convertedListing.names}
          }
        }
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>child component(other form data is removed to keep it understandable)</p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
    &lt;div v-for="name in this.form.names" :key="name"&gt;
      &lt;p&gt;{{ name }} &lt;a @click.prevent="deleteName(name)"&gt;Delete&lt;a /&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  
  &lt;script&gt;
    import Listing from '@/models/listing'
  
  
    export default {
      name: 'ListingModal',
      props: {isEdit: {type: Boolean, default: false}, formProps: {type: Object}},
      data() {
        return {
          name: '',
          scrollable: true,
          form: {names: this.formProps.names}
        }
      },
      methods: {
        addName() {
          this.form.names.push(this.name)
          this.name = ''
        },
        deleteName(name) {
          const names = this.form.names
          names.splice(names.indexOf(name), 1)
        }
      }
  
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I make the <code>NewListingModal</code> component rendering wait until the asyncData completes in parent?</p>