Vue3 中使用 TypeScript 而且使用了 <script lang="ts" setup>语法 ref无法渲染

在 Vue3 中使用 TypeScript 并使用 `<script lang="ts" setup>` 语法时，`ref` 的使用稍有不同。`ref` 不能直接作为模板中的变量来使用，而是需要通过 `toRef`、`toRefs` 或 `unref` 来进行转换。

例如，假设我们有一个 `ref` 定义如下：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count,
    };
  },
};

如果我们需要在模板中使用这个 `count`，则需要进行如下转换：

import { ref, toRef } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count: toRef(count),
    };
  },
};

这样，我们就能在模板中正常使用 `count` 了。如果需要使用多个 `ref`，则可以使用 `toRefs`：

import { ref, toRefs } from 'vue';

export default {
  setup() {
    const count1 = ref(0);
    const count2 = ref(0);

    return {
      ...toRefs({
        count1,
        count2,
      }),
    };
  },
};

这样，我们就能在模板中正常使用 `count1` 和 `count2` 了。