在反应变量方面，Nuxt 与 Vue 有何不同？

我多年来一直使用 Vue 进行前端（业余）开发，并决定尝试一下Nuxt。

在完成教程之后，我想我已经有了一个大致的想法，并创建了一个简单的项目，其中：

• 我会在页面上输入一个数字，然后发送到后端，
• 然后以一个递增的数字作为响应
• 同时显示在主页上。

为此，我创建了一个新项目，并在其中编写了几个文件：

server/api/addOne.ts

export default defineEventHandler((event) => {
    const oldNumber = (getRouterParam(event, 'number') || 0) as number
    return {
        oldNumber: oldNumber,
        newNumber: oldNumber + 1,
    }
})

app.vue

<template>
  <div>
    <AddOne></AddOne>
  </div>
</template>

components/AddOne.vue

<template>
    <div>
        <input v-model="myNumber" />
        <button @click="sendToServer">send</button>
        <div> -{{ numberFromServer }}- </div>
    </div>
</template>

<script lang="ts">
const myNumber = ref(0)
const numberFromServer = ref(0)
const sendToServer = async (number: number) => {
    console.log('clicked')
    const { data, pending, error, refresh } = await useFetch('/api/addOne', {
        method: 'post',
        body: {
            number: myNumber.value
        }
    })
    numberFromServer.value = data.newNumber
    myNumber.value = -1
    console.log(`number from server: ${numberFromServer.value}`)
}
</script>

应用程序构建并显示预期内容：

该应用程序不起作用（输入一个数字并按下send任何按钮）并且我收到以下警告：

 WARN  [Vue warn]: Property "myNumber" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Property "numberFromServer" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>

我不明白它们来自哪里 -myNumber以及numberFromServer在组件中定义。当我输入它们时，我已经很惊讶 VSCode 没有建议它们，但我认为这可能是插件的问题。

我认为我做了一些根本性错误的事情，因此我的问题是关于变量应该在 Nuxt 中定义在哪里，以及它们在 Vue 中定义在哪里。