Vueで共通のdataを呼び出したい

Question

やりたいこと

Vueで共通のdataを各componentで呼び出したいですが、やり方がわかりません…。
どうすればよいでしょうか？
よろしくお願いします。

// ItemList.vue

<script>
export default {
  data() {
    return {
      // itemListを呼び出したい
      itemList: [
        { id: 1, name: 'dog' },
        { id: 2, name: 'cat' }
      ]
    }
  }
}
</script>

ためしたこと

// 呼び出したいcomponent側

<template>
 <ul>
   <li v-for="item in products" :key="item.id">
     {{ item.name }}
   </li>
 </ul>
</template>

<script>
import ItemList from '@/components/ItemList.vue'

export default {
  data() {
    return {
      products: ItemList.data.itemList
    }
  }
}
</script>

Answer 1

Vuexを使いましょう。
学習コストは少しかかりますが、今後も同じようなことを実現したい場合が多々あるため(経験則)、一度学んでおくと楽です。
下の公式へのリンクから辿って行けば、体系的に学べます。
https://vuex.vuejs.org/ja/installation.html