vite+vue3+ts，其中Home.vu中，typeScript使用响应式变量报错:2304,找不到名称

一段代码,只要是要使用msg,显示正常,浏览器正常运行,F12没有报错,但是编译报错。

下面是home页面的完整代码：

<template>
  <div class="home">这是home页</div>
  <div>
    <el-table
      :data="tableData.slice((page.index - 1) * page.size, page.index * page.size)"
      style="width: 90%"
      size="mini"
    >
      <el-table-column prop="studentId" label="Id" />
      <el-table-column prop="studentNo" label="No" />
      <el-table-column prop="studentName" label="Name" />
    </el-table>
    <Pagination :total="page.total" @pageChange="pageChange"></Pagination>
  </div>
  <el-button type="success" plain @click="$router.push('/about')">跳转about页</el-button>
  <div>{{ weather.city }}</div>
  <HelloWorld></HelloWorld>
</template>

<script lang="ts">
// 导入
import HelloWorld from "@/components/HelloWorld.vue";
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getWeather } from "@/api/weather";
import { getStudent } from "@/api/student";
import Pagination from "@/components/Pagination.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
    Pagination,
  },
  setup() {
    onMounted(() => {
      student();
      Weather();
      setInterval(() => {
        Weather();
      }, 1000 * 60 * 60);
    });

    const data = reactive({
      tableData: [],
      weather: {},
      page: {
        total: 0,
        index: 1,
        size: 10,
      } as any,
    });

    function Weather() {
      getWeather().then((res: any) => {
        data.weather = res;
        console.log(res);
      });
    }

    function student() {
      getStudent().then((res: any) => {
        data.tableData = res.data;
        console.log(res.data);
        data.page.total = res.data.length;
      });
    }

    function pageChange(item: any) {
      data.page.index = item.currentPage;
      data.page.size = item.pageSize;
      console.log(data.page.index, data.page.size);
    }

    return {
      ...toRefs(data),
      onMounted,
      pageChange,
    };
  },
};
</script>

<style scoped lang="scss">
div {
  margin: 10px;
}
</style>

编译报错信息发出来

。。。

const data = reactive({
      tableData: [],
      weather: {},
      page: {
        total: 0,
        index: 1,
        size: 10,
      } as any,
    });

调用的问题 应该是data.tableData
在vue3中 声明的变量可以直接调用 不用包裹在data中