I am encountering the error "Uncaught ReferenceError: comp1 is not defined" when emitting "update:modelValue" from the component.
Interestingly, this issue only occurs after I have built the project, not during development.
Parent:
<script setup>
import TestComp from "/src/components/TestComp.vue";
</script>
<script>
export default {
data() {
return {
comp1: null // If I remove this line, the error will stop, but the watcher won't function properly
};
},
components: {
TestComp
},
watch: {
comp1(newVal, oldVal) { console.log(oldVal, newVal) },
}
};
</script>
<template>
<TestComp
v-model="comp1"
class="form-control"
/>
</template>
Component:
<script>
import { defineComponent } from "vue";
export default defineComponent({
data() {
return { input: '' }
}
});
</script>
<template>
<input
type="text"
v-model="input"
@change="$emit('update:modelValue', input)"
/>
</template>