V-Model is not Reactive (Vue3) - vue.js

Question

I have an string input Component, which passes the inputted data back to the parent component, and stores it in a Form Object.
This was working fine, until I began to use a Validation Library (Vee-Validate), I'm trying to retrace my changes, but cannot seem to solve this issue without breaking the validator. I've copied the relevant code below.
Parent Component:
<template>
<form class="form" #submit.prevent="submitFormData">
<BaseInput
v-model="form.salutation.firstName"
type="text"
class="text-class"
label="case_file.table.first_name"
:required="true"
/>
</form>
</template>
const form = reactive({
salutation: {
firstName: ""
},
});
Child Component:
<template>
<div class="form-control">
<label class="label">
<span class="label-text">{{ $t(`${labelName}`) }}</span>
</label>
<input
type="text"
class="input input-bordered"
:value="value"
#input="$emit('update:modelValue', $event.target.value)"
v-on="validationListeners"
/>
<span>{{ errorMessage }}</span>
</div>
</template>
<script setup>
import { useField } from "vee-validate";
import { reactive, computed } from "vue";
import { toRefs } from "#vue/reactivity";
import { ref, watch } from "vue";
import { useParticipantStore } from "#/store/participant";
const participantStore = useParticipantStore();
const props = defineProps({
label: {
type: [String, Boolean],
default: false,
},
modelValue: {
type: String,
default: "",
},
required: {
type: Boolean,
default: false,
},
});
const labelName = ref(props.label);
const localInputValue = ref(props.modelValue);
function validateField(value) {
if (!value && props.required) {
return "This is required";
}
return true;
}
const { errorMessage, value, handleChange } = useField(
"fieldName",
validateField,
{
validateOnValueUpdate: false,
}
);
const validationListeners = computed(() => {
// If the field is valid or have not been validated yet
// lazy
if (!errorMessage.value) {
return {
blur: handleChange,
change: handleChange,
input: (e) => handleChange(e, false),
};
}
// Aggressive
return {
blur: handleChange,
change: handleChange,
input: handleChange, // only switched this
};
});
</script>

Answer 1

With this TextInput component:
value does not need to be a prop
Just emit the update:modelValue event to the parent (this should
be enough)
For the required validation, the browser will help us if we manage the form submit and input attributes properly.
IMHO, other validations should go in the form component rather than the input component. the input should only open the gate for errorMessages to render.
Also, if we have the error messages object (reactive) in the form component, we can determine the submit button state easily.
This does not include vee-validate code but I think you can embed it easily. I feel vee validation should go inside the form component.
<template>
<div class="form-control">
<label class="label">
<span class="label-text">{{ labelName }}</span>
</label>
<input
type="text"
class="input input-bordered"
:value="tv"
:required="required"
#input="updateModelValue"
#change="$emit('change', $event.target.value)"
#focus="$emit('focus', $event.target.value)"
#blur="$emit('blur', $event.target.value)"
#keyup="$emit('keyup', $event.target.value)"
>
<span>{{ errorMessage }}</span>
</div>
</template>
<script setup>
import {ref, defineProps, defineEmits} from "vue"
const emit = defineEmits([
"update:modelValue",
"change",
"blur",
"focus",
"keyup",
])
const tv = ref("")
defineProps({
labelName: {
type: String,
default: ""
},
errorMessage: {
type: String,
default: ""
},
required: {
type: Boolean,
default: false
}
})
const updateModelValue = ($event) => {
tv.value = $event.target.value
emit("update:modelValue", $event.target.value)
}
</script>
And this is in the Parent component:
<template>
<form #submit.prevent="submitForm">
<TextInput
v-model="form.salutation.firstName"
label-name="First Name"
:error-message="formErrors.salutation.firstName"
required
#keyup="validateFirstName"
/>
<button
type="submit"
:disabled="formErrors.salutation.firstName"
>
Submit
</button>
</form>
</template>
<script setup>
import {reactive, watch} from "vue"
const form = reactive({
salutation: {
firstName: "",
}
})
const formErrors = reactive({
salutation: {
firstName: null,
}
})
const validateFirstName = () => {
if (form.salutation.firstName && form.salutation.firstName.length < 3) {
formErrors.salutation.firstName = "First name must be at least 3 characters"
return false
} else {
formErrors.salutation.firstName = null
return true
}
}
const submitForm = () => {
console.log(form.salutation.firstName)
}
</script>
This should make your form:
not submittable when empty (required validation)
show|hide error messages on keydown