Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

//ストア.js
'vue' から Vue をインポートします。

export let store =Vue.observable({count:0,name:'李四'});
エクスポートlet変異={
    setCount(カウント){
        ストア.count=カウント;
    },
    名前を変更する(名前){
        ストア.name=名前;
    }
}

//オブザーバブル.vue
<テンプレート>
  <div>
    <h1>クロスコンポーネントデータ状態共有オブザーバブル</h1>
    <div>
      <トップ></トップ>
      <下></下>
    </div>
  </div>
</テンプレート>

<スクリプト>
'./components/top.vue' から top をインポートします。
'./components/bottom.vue' から bottom をインポートします。
エクスポートデフォルト{
  名前: 'obserVable',
  コンポーネント:
    トップ、
    底
  }
};
</スクリプト>

<スタイルスコープ>
</スタイル>

//コンポーネントa
<テンプレート>
  <div class="bk">
    <span
      ><h1>コンポーネント</h1>
      {{ 数 }}--{{ 名前 }}
    >
    <button @click="setCount(count + 1)">現在のコンポーネントに +1 します</button>
    <button @click="setCount(count - 1)">現在のコンポーネント -1</button>
  </div>
</テンプレート>
<スクリプト>
'@/store' から store, mutations をインポートします。
エクスポートデフォルト{
  計算: {
    カウント() {
      store.count を返します。
    },
    名前（） {
      ストア名を返します。
    }
  },
  メソッド: {
    setCount: 変異.setCount、
    変更名: 変異.変更名
  }
};
</スクリプト>
<スタイルスコープ>
.bk {
  背景: ライトピンク;
}
</スタイル>

//コンポーネントb
<テンプレート>
  <div class="bk">
    <h1>b コンポーネント</h1>
    {{ 数 }}--{{ 名前 }}
    <button @click="setCount(count + 1)">現在の b コンポーネントに +1 </button>
    <button @click="setCount(count - 1)">現在の b コンポーネント -1</button>
  </div>
</テンプレート>
<スクリプト>
'@/store' から store, mutations をインポートします。
エクスポートデフォルト{
  計算: {
    カウント() {
      store.count を返します。
    },
    名前（） {
      ストア名を返します。
    }
  },
  メソッド: {
    setCount: 変異.setCount、
    変更名: 変異.変更名
  }
};
</スクリプト>
<スタイルスコープ>
.bk {
  背景: ライトグリーン;
}
</スタイル>