How to deal with asynchronous data in Vue?

Question

JavaScript

Hey!
What to do when the data in the child component causes errors? Did I do something wrong in the first place?
The problem is this:
There is a very common blog post view page. Under it the component is created.
It is the parent of the child types "meta info", "post content", "footer", etc.
An object is passed to the child components postand contains all the necessary information.
But the parent component (post page) receives data from the storage vuexat the stage beforeMountor createdand there the data is requested from the server.
To be clear, here is the parent code:

<template lang="pug">
  div
    page-title(v-bind="page")
    .container.padding-bottom-3x.mb-2
      .row.justify-content-center
        .col-lg-10
          post-meta(v-bind="post")
          post-content(v-bind="post")
          post-footer(v-bind="post")
          post-navigation(v-bind="post")
          comments(v-bind="comments")
          new-comment-form(v-bind="post")
</template>

<script>
export default {
  name: 'PostsShow',
  computed: {
    post() {
      return this.$store.getters['blogs/getPostContent']
    },
    page() {
      return {
        title: this.post.title,
      }
    },
    comments() {
      return this.post.comments
    }
  },
  beforeMount() {
    this.$store.dispatch('blogs/fetchPost', this.$route.path)
  },
  components: {
    ...
  }
}
</script>

The problem itself is observed in the children. For example, the component post-metauses in the code, author.namebut at the time of loading this component, this property does not exist and throws errors:

Something tells me that this component should not be loaded at all if the object did not get into it post.
This is the child component code:

<template lang="pug">
  .single-post-meta
    .column
      .meta-link
        span {{__('blogs.show.by')}}
        router-link(
          :to="{name:'members.show', params: {login: author.login}}"
          ) {{author.name}}
      .meta-link
        span {{__('blogs.show.in')}}
        router-link(
          v-for="tag in tags",
          :key="tag.name"
          :to=""
        ) {{tag.name}},
    .column
      .meta-link
        a(href="#")
          i.icon-clock
          | {{published_at}}
      .meta-link
        a.scroll-to(href="#")
          i.icon-speech-bubble
          | {{comments_count}}
</template>

<script>
export default {
  name: 'PostMeta',
  props: {
    author: Object,
    tags: {
      type: Array,
      default: ()=>([]),
    },
    comments_count: Number,
    published_at: String,
  }
}
</script>

Moreover, this situation is observed with nested properties, such as: post.author.name
What am I doing wrong?

Answer 1

Maybe just hide it like this:

.col-lg-10(v-if="post")
          post-meta(v-bind="post")
          post-content(v-bind="post")
          post-footer(v-bind="post")
          post-navigation(v-bind="post")
          comments(v-bind="comments")
          new-comment-form(v-bind="post")