Te falta setup dentro de <script lang="ts"> por lo que debería ser:

<script setup lang="ts">

De los documentos:

Al usar <script setup> , cualquier enlace de nivel superior (incluidas variables, declaraciones de funciones e importaciones) declarado dentro se puede usar directamente en la plantilla (...)

https://v3.vuejs.org/api/sfc-script-setup.html#los enlaces de nivel superior están expuestos a la plantilla

No sé si todavía tienes este error, pero también tuve esto. Lo he arreglado arreglando un error de TS silencioso. Cuando solucioné este error, todo volvió a funcionar.

EDITAR: Encontré el error que tenía. Había puesto una enumeración en un archivo * .d.ts y estaba usando esta enumeración en el archivo que me dio el mismo error que usted. El problema es que una enumeración no puede estar en un archivo *.d.ts porque no se compila en JS después y pierde el valor de la enumeración. Al corregir este error, ya no se mostraban los errores. Lo que quiero decir con esto no es que haya una solución simple para su problema, sino que tal vez, como yo, ¡tiene un error silencioso que se esconde y causa estos errores!

Tuve un problema similar cuando agregué lang="ts" al archivo vue ya que soy nuevo en Vue 3 y Typescript. Lo resolví asegurándome de lo siguiente:

 export default

para

 export default defineComponent({

en su archivo .vue.

Asegúrese de agregar la importación.

 import { defineComponent }

Sus datos también deben residir en la configuración.

 setup () { return { loader: false, error: false, firstTime: false

La API de composición ayuda mucho con este problema. No parece haber un camino claro para solucionar el problema en la API de Opciones.

Una forma de solucionar el problema en la API de opciones:

Cree un archivo MyComponent.d.ts que corresponda al componente con el que está trabajando y agregue lo siguiente en ese archivo:

 declare module '@vue/runtime-core' { interface ComponentCustomProperties { myTroublesomeVariable: boolean // change here } }

Tuve el mismo problema.

No se pudo encontrar una solución después de inspeccionar VSCode/TS y Volar.

Creó una pequeña reproducción (quería publicarla en Discord):

 <template> <input v-model="email" /> </template> <script setup lang="ts"> import { ref } from 'vue' const email = ref('') </script>

Después de guardar este archivo como Test.vue , el error en otros archivos desapareció. Lo siento, pero no sé por qué...

Use defineComponent en lugar de export default class ParentSupervise extends Vue . Escribe así:

 <template> <div class="hello"> <h1>{{ book.title }}</h1> </div> </template> <script lang="ts"> import { reactive, ref, defineComponent } from "vue"; interface Book { title: string; } const HelloWorld = defineComponent({ data() { return { boardFields: "燕儿", }; }, setup() { let name = ref("燕"); const book = reactive({ title: "Vue 3 Guide" }) as Book; debugger; console.log("name :>> ", name); console.log("book :>> ", book); // 暴露给 template return { book, name, }; }, }); export default HelloWorld; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"></style>