title: Why do I get Undefined error when trying to pass async API data as prop from parent to child component?
body: <p>Can someone tell me why I get <code>undefined</code> when trying to pass a prop down to child component?</p>
  <p>Error: <code>Cannot read properties of undefined (reading 'title')</code></p>
  <p>Sandbox reproduction: <a href="https://codesandbox.io/s/little-silence-3lgd9?file=/components/PostEditor.vue" rel="nofollow noreferrer">https://codesandbox.io/s/little-silence-3lgd9?file=/components/PostEditor.vue</a></p>
  <p>Parent component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;PostEditor v-bind=&quot;post&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;PostsEdit&quot;,
    data() {
      return {
        post: {},
      };
    },
    async created() {
      const response = await fetch(
        &quot;https://jsonplaceholder.typicode.com/posts/1&quot;
      );
      this.post = await response.json();
    },
  };
  &lt;/script&gt;
  
  </code></pre>
  <p>Child component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;section&gt;
      {{ title }}
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    post: {
      type: Object,
      default: () =&gt; {},
      required: false,
    },
    data() {
      return {
        title: this.post.title,
      };
    },
    methods: {
      save() {
        this.$emit(&quot;save&quot;, {
          ...this.formValues,
        });
      },
    },
  };
  &lt;/script&gt;
  </code></pre>