I have this custom text input. It returns the v-model value, however it has two issues.

1. When I set a value on created(), it sets modelValue and inputValue but meta.valid is still set to false and can't continue validation.

2. When I set a value on watch(), it sets modelValue but not inputValue and meta.valid is false.

   <template>
     <div
       class="TextInput"
       :class="{ 'has-error': !!errorMessage, 'success': meta.valid }"
     >
       <label :for="name">{{ label }}</label>
   
         <input
           :name="name"
           :id="name"
           :type="type"
           :placeholder="placeholder"
           :value="modelValue"
           :class="inputClass"
           @input="onInput($event)"
           @blur="handleBlur"
         />
   
       <p class="help-message" v-show="errorMessage || meta.valid">
         {{ errorMessage || successMessage }}
       </p>
     </div>
   </template>
   
   <script>
   import { useField } from "vee-validate";
   
   export default {
     props: {
       type: {
         type: String,
         default: "text",
       },
       value: {
         type: String,
         default: "",
       },
       name: {
         type: String,
         required: true,
       },
       label: {
         type: String,
         required: false,
       },
       successMessage: {
         type: String,
         default: "",
       },
       placeholder: {
         type: String,
         default: "",
       },
       modelValue: {
         type: [String, Number],
         description: "Input value",
       },
       inputClass: {
         type: String,
         default: "",
       },
     },
     setup(props, {emit}) {
       const {
         value: inputValue,
         errorMessage,
         handleBlur,
         handleChange,
         meta,
       } = useField(props.name, undefined, {
         initialValue: props.modelValue,
         valueProp: props.modelValue
       });
   
       const onInput = (event) => {
         handleChange(event, true)
         emit('update:modelValue', event.target.value)
       }
   
       return {
         onInput,
         handleChange,
         handleBlur,
         errorMessage,
         inputValue,
         meta,
       };
     }
   };
   </script>