親子孫コンポーネントにおけるcreated, mounted（ライフサイクルフック）の処理の順番

Vue.jsの親、子、孫のコンポーネント構成で、親コンポーネントで取得したデータを子コンポーネントや孫コンポーネントで扱いたく、created、mountedのどこで実装するのがいいのかというのが気になり検証してみましたので、検証した内容を書いていきたいと思います。

環境
サンプルコード
実行結果
参考

環境

・Vue.js: v2.6.14

サンプルコード

今回利用したサンプルコードを以下に貼り付けて行きます！

まずは、親コンポーネント（ParentComponent.vue）
parentという文字を表示し、シンプルに子コンポーネントを呼び出すだけの処理になります。


<template>
  <div>
    <span>parent</span>
    <child-component />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent,
  },
  created() {
    console.log("created: parent component");
  },
  mounted() {
    console.log("mounted: parent component");
  },
}
</script>

次に、子コンポーネント（ChildComponent.vue）
こちらもシンプルにchildという文字を表示し、孫コンポーネントを呼び出すだけの処理になります。


<template>
  <div>
    <span>child</span>
    <grand-child-component />
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue'
export default {
  components: {
    GrandChildComponent,
  },
  created() {
    console.log("created: child component");
  },
  mounted() {
    console.log("mounted: child component");
  },
}
</script>

そして、最後に孫コンポーネント（GrandChildComponent.vue）
こちらは、コンポーネントの呼び出しはありませんのんで、grand childという文字を表示するだけの処理になります。


<template>
  <div>
    <span>grand child</span>
  </div>
</template>

<script>
export default {
  created() {
    console.log("created: grand-child component");
  },
  mounted() {
    console.log("mounted: grand-child component");
  },
}
</script>

実行結果

上記のコードを実行し、開発者ツールのconsoleを確認すると↓のように順番で出力されており、

created: parent component
created: child component
created: grand-child component
mounted: grand-child component
mounted: child component
mounted: parent component

これにより、以下の流れになることが確認できました。
createdは、親 → 子 → 孫
mountedは、孫 → 子 → 親

ということは、mountedでは、今回、実施したかった親コンポーネントのデータを子コンポーネント、孫コンポーネントで利用するということはできず、createdでやるべきだということがわかりました。
同じように悩まれている方に、役立つ情報となってくれれば幸いです。