Vue2で[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

表題のエラーに出会いました。

codesandboxにて、Composition APIで遊んでいた時に表題のエラーに出会ったので備忘録。
Vueは2系を使用しています。

ソース

[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
該当のエラー箇所はimport下のref。
でもなぜこれでエラーになるのか・・・

// Hello.vue
<template>
  <div class="hello">
    <p class="display-nuber">{{ num }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "@vue/composition-api";
const num = ref(1); // <- ここでエラー

export default defineComponent({
  name: "test",
  setup() {
    const increment = () => {
      num.value++;
    };

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

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueCompositionApi from "@vue/composition-api";

Vue.use(VueCompositionApi);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

とりあえず解決

調べていくうちにこちらのissueを見つけました。
https://www.notion.so/Composition-API-24c25585c44e4559802d7bbf497511b3#eb149d74d549447bbc08cdfd63691926

内容を見ていくと、export defaultの中でrefを使えば解決しそうな雰囲気。
ということで中に入れました。

// Hello.vue
<template>
  <div class="hello">
    <p class="display-nuber">{{ num }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
  name: "test",
  setup() {
    const num = ref(1); // <- export defaultの中に入れた
    const increment = () => {
      num.value++;
    };

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

解決。これでエラーは出なくなりました。

少し深堀り

こちらのstack overflowを見てみると

In short you need to create a separate file that will install the composition API plugin and call that file within the router/index.ts file to instantiate the plugin.
It’s because of the composition API not being inside Vue itself.

Vue２系が内部にComposition APIを持っていないことが原因のよう。
また読み進めていくとプラグインを読み込むファイルを外に切り出せばうまくいきそうです。

// installCompositionApi.js
// 新たにこのファイルを作成

import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";

Vue.use(VueCompositionApi);

// main.js
import "./InstallCompositionApi"; // 追加
import Vue from "vue";
import App from "./App.vue";
// import VueCompositionApi from "@vue/composition-api"; 削除

// Vue.use(VueCompositionApi); 削除
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

// Hello.vue
<template>
  <div class="hello">
    <p class="display-nuber">{{ num }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "@vue/composition-api";
const num = ref(1); //元の位置に戻した（export defaultの外）

export default defineComponent({
  name: "test",
  setup() {
    // const num = ref(1); 削除
    const increment = () => {
      num.value++;
    };

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

これでexport defaultの外でrefを使用してもエラーは出なくなりました。

Vue3では？

Composition APIがプラグインではなく正式に追加されているため、こちらのエラーは解消されているようです。
実際にcodesandboxで動かしてみましたが、これまでに記述したことをしなくてもrefをexport defaultの外に出すことができました。
おわり。