Vue3 passing props to child component after async call-CodePudding

Variations of this questions seems to have been asked already but not I cant quite find an answer specific to my situation.

I want to make an async call in a parent component and after I get the response, send the data to the child component. Since the call is async, the child will be created by the time the response data is available so how can I get it to refresh?

I tried using $emit as some other threads have suggested but if Im not mistaken it seems to only work if the child is emitting to to alert the parent but not the other way around.

Whats the best way to refresh the child after the async call? I know Vuex is an option but I'm hoping to understand how Vue3 life-cycles and props work before learning more bout that. Here is what I currently have (after giving up on $emit)
Parent:

<template>
  <div>
    <TextBlock :myText="myText" />
  </div>
</template>

<script>
...

export default {
  components: {
    TextBlock
  },
  data: () => ({
    myText: []
  }),
  async created() {
    if (this.$route.params.text_id != null) {
      this.myText = await GetContent(this.$route.params.text_id);
      console.log(this.myText);  // Confirmed that text is updated
    }
  }
};
</script>

Child:

<template>
  <code>
    {{ myText }}
  </code>
</template>

<script>
...
export default {
  ...
  props: {
    myText: String
  },
};
</script>

CodePudding user response：

In Vue props are reactive, that means that when they change they should automatically update without any additional events.

From what I see your code should work and in the sfc playground it does. Link