親から子コンポーネントに渡した値が{__ob__: observer}になり値を取れない

Question

親コンポーネントでdata属性のプロパティに配列を代入。
その後、props経由で子コンポーネントにその配列を渡しているのですが、developer toolでログを確認すると{ob: observer}という謎の値に変わっており、更にそのobserverに対してforeachなどしても、値を取り出せません。

修正版

//edit.vue
<template>
  <v-app id="edit">
    <Search :categories="categories"></Search>
  </v-app>
</template>
<script>
export default{
    data: function() {        
        return{
            categories: [],
        }
    },
　　 beforeCreate: 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: Array,
        default: []
   },
  mounted: function(){
     console.log(this.categories);
     this.categories.forEach((value) => {
     　console.log(value.name);
     　this.selected.categories.push({ id: value.id, name:value.name })
      }
  }

このobserverなるオブジェクト自体には[{id=>1,name=>"aa"}]という親コンポーネントで代入した値が入っているみたいなのですが、
その後foreachで展開しようとすると、consoleにログが表示されません。
Arrayオブジェクトではないので当然かもしれませんが、どうしたらobserverからこのidとnameを取り出せるでしょうか？
後そもそも何故、Arrayで渡したオブジェクトがこの様なobserverというオブジェクトになってしまうのでしょうか？
よろしくお願いします。

Answer 1

ライフサイクルフックのbeforeCreateはインスタンス生成直後なので、何もDOMが生成されていないどころか、変数dataも生成されていない状態です。

なので、普通にmountedで問題ないのでは？

Comments

[widget11]

回答ありがとうございます！！
edit.vueのbeforecreatedをmountedに変更してみたのですが、
observerという値は変わらないですね。。。
edit.vueとsearch.vueのライフサイクルフックに関して、親のライフサイクルに対して子はどの様にすればいいといったベストプラクティスみたいなのはあるのでしょうか？
確かにライフサイクル周りでこの様な値が入ってきていると思い、、、お手数をおかけしますがよろしくお願いします。

[FKM]

observerはフック処理前にデータを読み込めていない状態に表示される現象です。jsonを読み込んだりするとよくそれが起きるので、その場合はaxiosで制御したりします。つまり、子にデータが行き渡る前の段階、親へのデータインポート段階で問題が発生しています。

あとcategories: []としてみてはどうでしょうか？

[widget11]

ご回答ありがとうございます。
axiosで制御というと具体的にどの様にすれば良いのでしょうか？
添付コードを編集してaxiosで取得している部分を記載しましたが、データ処理できたらみたいな処理の仕方を思いつかず。。。
何度もお伺いして申し訳ないですがよろしくお願いします。