<template>
  <div>
    <counter v-if="counter > 0" />
    <button type="button" @click="increment">カウントアップ</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, provide } from "@nuxtjs/composition-api";
import useCounterStore, {　CounterStore,　CounterStoreKey　} from "~/stores/CounterStore";
import Counter from "~/components/Counter.vue";

export default defineComponent({
  components: { Counter },
  setup() {
    provide(CounterStoreKey, useCounterStore());

    const { counter } = inject(CounterStoreKey) as CounterStore;

　　　　　　　　const increment = () => counter.value++;

    return {
      counter,
      increment
    };
  },
});
</script>

<template>
  <div>{{ counter }}</div>
</template>

<script lang="ts">
import { defineComponent, inject, watch } from "@nuxtjs/composition-api";
import { CounterStore, CounterStoreKey } from "~/stores/CounterStore";

export default defineComponent({
  setup() {
    const { counter } = inject(CounterStoreKey) as CounterStore;

    watch(counter, () => console.log(counter.value)); // ①

    return {
      counter,
    };
  },
});
</script>

import { InjectionKey, ref } from "@nuxtjs/composition-api"

const useCounterStore = () => {
  const counter = ref(0)
  return { counter }
}

export type CounterStore = ReturnType<typeof useCounterStore>
export const CounterStoreKey: InjectionKey<CounterStore> = Symbol('CounterStore')
export default useCounterStore