我有一个使用Vue 3 "^3.2.41"和Vite "^4.2.1"的项目，我创建了Input.vue组件以在父组件中使用。
我的Input.vue组件代码是这样的：

<template>
    <div class="mb-6">
        <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" :for="id">
            {{ label }} <span class="text-red-600" v-if="isRequired">*</span>
        </label>
        <input :id="id" v-model="modelValue" @input="emit('update:modelValue', modelValue)" :class="inputClasses" :type="type"
            :placeholder="placeholder">
        <ValidationMessage :validation="validation" :field="id" />
    </div>
</template>

<script setup>
import ValidationMessage from '@/components/ValidationMessage.vue'

defineProps({
    isRequired: {
        type: Boolean,
        default: false
    },
    label: {
        type: String,
        required: true
    },
    id: {
        type: String,
        required: true
    },
    modelValue: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        required: true,
    },
    placeholder: {
        type: String,
        default: '',
    },
    validation: {
        type: Object,
        default: null,
    },
    inputClasses: {
        type: String,
        default: 'appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3',
    },
})

const emit = defineEmits(['update:modelValue'])
</script>

我在父组件Create.vue中使用Input.vue：

<template>
    <loading v-if="course.loading" />
    <div class="pt-15">
        <div class="grid gap-6 mb-8">
            <div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <h4 class="mb-4 font-semibold text-gray-600 dark:text-gray-300">
                    Add data
                </h4>

                <form @submit.prevent="store">
                    <Input isRequired label="Judul" id="title" v-model="course.fields.title" type="text"
                        placeholder="Masukkan judul" :validation="validation" />
                    <BtnSubmit title="Simpan" />
                    <BtnCancel router-name="admin.courses.index" />
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Loading from '@/components/Loading.vue'

import Input from '@/components/Form/Input.vue'

import BtnSubmit from '@/components/Button/BtnSubmit.vue'
import BtnCancel from '@/components/Button/BtnCancel.vue'

import { useStore } from '@/stores'

const { course } = useStore()

const router = useRouter()

let validation = ref([])

onMounted(async () => {
    course.resetFields()
})

const store = async () => {
    try {
        await course.createCourse(router)
    } catch (error) {
        validation.value = error
    }
}
</script>

我很困惑，当我运行npm run dev它的工作完美，但当我运行npm run build，并尝试npm run serve它的错误：

Input-00fb8882.js:1 Uncaught ReferenceError: modelValue is not defined
    at i.onUpdate:modelValue.t.<computed>.t.<computed> [as _assign] (Input-00fb8882.js:1:969)
    at HTMLInputElement.<anonymous> (index-83e87120.js:1:63876)

我的package.json代码：

{
  "name": "learn-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "serve": "vite preview",
    "build-dev": "vite build --mode development",
    "build": "vite build",
    "lint": "vite lint"
  },
---other depedencies---

如何解决这个问题？感谢之前