setup内で定義し、returnしたものをtemplate内で呼び出すと定義されてない、というエラーが表示されます。(Vue.js2/composition-api)

Question

Vue.js2系でcomposition-apiを使用したコードをtypescriptで書いています。

やりたいこと

setup内で定義し、returnしたものをtemplate内で使用したいです。
v-bindしている部分などでhoge_statusやfuga_statusを使用したいです。

現状

下記のエラーが表示されてしまいます。

[Vue warn]: Property or method "hoge_status" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Vue warn]: Property or method "fuga_status" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

調べたこと

公式に以下のように書かれていました。dataがwill not have accessに含まれているのが何か原因なのではと思いました。

Accessing Component Properties

When setup is executed, the component instance has not been created yet. As a result, you will only be able to access the following properties:
props
attrs
slots
emit
In other words, you will not have access to the following component options:
data
computed
methods

ですが、こちらの記事ではsetup()内で定義、returnした値をtemplate内で使用出来ている様でした。(vue3だからでしょうか？）

以下コード

<template>
     <v-row class="col">
          <span
            @click="hoge_show()"
            v-bind:class="{ active: hoge_status }"
          >
            Hoge
          </span>
          <span
            @click="fuga_show()"
            v-bind:class="{ active: fuga_status }"
          >
            Fuga
          </span>
      </v-row>
</template>

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

interface Gears {
  title: string;
}

export default defineComponent({
  setup() {
    onMounted(() => {
      hoge_show();
    });

    var hoge_status = ref<boolean>(false);
    var fuga_status = ref<boolean>(false);

    const hoge_gears: Gears[] = [
      {
        title: "h_aaaa"
      },
      {
        title: "h_oooo"
      },
    ];

    const fuga_gears: Gears[] = [
      {
        title: "f_rrrr"
      },
      {
        title: "f_tttt"
      },
    ];

    const hoge_show = (): void => {
      fuga_status.value = false;
      hoge_status.value = true;
    };

    const ava_show = (): void => {
      hoge_status.value = false;
      fuga_status.value = true;
    };

    return {
      hoge_status,
      fuga_status,
      hoge_show,
      fuga_show,
    };
  }
});
</script>

なぜsetup()内で定義、returnしているのにtemplateで使用できないのか？が分かりません。
vue2では対応していない書き方なのでしょうか？

どなたか知見のある方いましたら、教えていただきたいです。
よろしくお願いします。

vue 2.6.11
@vue/composition-api 1.0.0-rc.11

Answer 1

reactiveの設定をつけるとうまく通りました。
vue2で行う場合は@vue/composition-apiでreactiveも読み込む必要があるみたいです。(自分の認識)

mainでVue.useします。(これ大事そう)

import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

<script lang="ts">
import {defineComponent, ref, reactive } from "@vue/composition-api";
 
export default defineComponent({
  setup() {
    const title = ref<string>("composition-api");
    const state = reactive<{ count: number }>({
      count: 0
    });
 
    return {
      title,
      state
    }
  }
});
</script>

refだけだと通らず、reactiveがあればどちらも通りました。

参考
https://github.com/vuejs/composition-api

Answer 2

リンク先にもVue3.xの新機能とありますので、vue2では対応していません。