问为什么Vue.js3‘`npm运行构建’给出了一大堆错误: TS2304“找不到名称‘foo’& TS2532”对象可能是‘未定义’“？

EN

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port 5050",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

44         v-model="user.password"
                    ~~~~

src/components/Register.vue:44:18 - error TS2304: Cannot find name 'user'.

44         v-model="user.firstName"
                    ~~~~

src/components/Login.vue:48:25 - error TS2532: Object is possibly 'undefined'.
...
...53 more :(

<script lang="ts">
import RegisterButton from "./buttons/RegisterButton.vue";
import ValidationErrors from "./ValidationErrors.vue";
export default {
  name: "RegisterUser",
  components: {
    RegisterButton,
    ValidationErrors,
  },
  data() {
    return {
      user: {
        firstName: "",
        lastName: "",
        email: "",
        password: "",
      },
      errors: {},
    };
  },
  methods: {
    onValidationError(errors: Record<string, unknown>) {
      let err = {};
      for (const key in errors) {
        const message = errors[key]["message"];
        err[key] = message;
      }
      this.errors = err;
    },
  },
};
</script>

<template>
  <div class="container-sm mt-3">
    <h1 class="mb-4">Register a New User</h1>
    <ValidationErrors :errors="errors" />
    <!-- Registration Form -->
    <div class="mb-3">
      <input
        type="text"
        class="form-control form-control-lg"
        placeholder="First Name"
        v-model="user.firstName"
      />
    </div>
    <div class="mb-3">
      <input
        type="text"
        class="form-control form-control-lg"
        placeholder="Last Name"
        v-model="user.lastName"
      />
    </div>
    <div class="mb-3">
      <input
        type="email"
        class="form-control form-control-lg"
        placeholder="Email"
        v-model="user.email"
      />
    </div>
    <div class="mb-3">
      <input
        type="password"
        class="form-control form-control-lg"
        placeholder="Password"
        v-model="user.password"
      />
    </div>
    <RegisterButton :user="this.user" @validationError="onValidationError" />
  </div>
</template>

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@": ["src/*"],
      "store/*": ["src/store/*"]
    },
    "module": "es2022",
    "moduleResolution": "Node",
  }
}