vueでコンポーネントからアプリケーションインスタンスの変数を参照する方法はありますか？

Question

下のコードで、コンポーネントのテンプレートの中の{{ name }}　も表示されるようにしたいのですが、表示されません。
表示する方法はありますか？

<script src="https://unpkg.com/vue@next"></script>

<div id="test">
    {{ name }}<br>
    <component1></component1><br>
    <component2></component2><br>
</div>


<script>
    const test = {
        data() {
          return {
            name: 'Taro'
          }
        }
    }
    const app = Vue.createApp(test)

    app.component('component1', {
        template: `
        {{ name }} - component1です`
    })

    app.component('component2', {
        template: `
        {{ name }} - component2です`
    })

    app.mount('#test')
</script>

Answer 1

propsで受け渡します。

<script src="https://unpkg.com/vue@next"></script>

<div id="test">
  {{ name }}<br>
  <component1 :name="name"></component1><br>
  <component2 :name="name"></component2><br>
</div>


<script>
  const test = {
    data() {
      return {
        name: 'Taro'
      }
    }
  }
  const app = Vue.createApp(test)

  app.component('component1', {
    props: ['name'],
    template: `
        {{ name }} - component1です`
  })

  app.component('component2', {
    props: ['name'],
    template: `
        {{ name }} - component2です`
  })

  app.mount('#test')

</script>

Comments

[Sonono]

ありがとうございます！！