親コンポーネントに記載しているaxiosでデータ処理を終えてから子コンポーネントの処理(表示)を行いたい

環境： vue2.6系

以下の様にedit.vueでapiにaxiosでrequestを送り、データの処理が完了したらcategoriesというプロパティに値をセットし、それを子コンポーネントのsearch.vueに渡しております。

しかし今のままであるとaxiosで通信している最中にSearch.vueをレンダリングをしている様で、
search.vueに渡ったcategoriesがobserverとして表示され子側で値を取り出したり処理を行えません。
そこでedit.vueのaxiosでしっかり通信しきったら(dataを受け取ったら)Searchをレンダリングするといった処理を行いたいのですが、調べても良い方法が出てこなかったため、質問させていただきます。
どの様な処理を以下のコードに加えたら安全に子コンポーネントに値を渡せるでしょうか？

//edit.vue
<template>
  <v-app id="edit">
    <Search :categories="categories"></Search>
  </v-app>
</template>
<script>
export default{
    data: function() {        
        return{
            categories: [],
        }
    },
    components: {　
        Search
    },
　　 mounted: function() {
        axios
            .get('http://localhost:3000//users/'+ id +'/edit.json')
            .then((response) => {
　　　         response.data.categories.forEach((value) => {
         　   this.categories.push({ id: value.id, name:value.name })
       　　}
　　　　　);
　　　}
}
</script>

//search.vueの一部
  props: {
        categories: [],
   },
  mounted: function(){
     console.log(this.categories);
     this.categories.forEach((value) => {
     　console.log(value.name);
     　this.selected.categories.push({ id: value.id, name:value.name })
      }
  }

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

そこでedit.vueのaxiosでしっかり通信しきったら(dataを受け取ったら)Searchをレンダリングするといった処理を行いたいのですが、調べても良い方法が出てこなかったため、質問させていただきます。
どの様な処理を以下のコードに加えたら安全に子コンポーネントに値を渡せるでしょうか？

やりたいこととしては、親コンポーネントでAPI通信を完結させて、
子コンポーネントでは常の最新の結果を表示したいと見受けられます。

その場合ですが、子コンポーネント側のpropsであるcategoriesをwatchする事でやりたい事は実現できるとおもいます。
moutedはコンポーネントの作成時にのみ実施される処理ですが、watchは監視対象の値が変化したら動作する処理となります。

JavaScript
1    watch: {
2        categories(categories) {
3            console.log(categories);
4            categories.forEach((value) => {
5                console.log(value.name);
6                this.selected.categories.push({ id: value.id, name:value.name });
7            });
8        }
9    },