Input Field Not Updating in Vue.js Component with Vee-Validate Integration

Question

I have a Vue.js component utilizing Vee-Validate for form validation. However, I'm encountering an issue where the input field does not update as expected when typing. Here's the setup code for the child component

<script setup>
import { useField } from 'vee-validate'
const props = defineProps(['modelValue', 'name', 'rules', 'password', 'enter'])
defineEmits(['update:modelValue'])

const { value: modelValue, errorMessage } = useField(props.name, props.rules ? props.rules : '')
</script>

<template>
  <div class="relative">
    <input
      :type="password ? 'password' : 'text'"
      :placeholder="name"
      class="outline-none border-b-2 pb-1 peer pl-1 w-full"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      @keypress.enter="enter"
    />
    <span
      class="absolute bg-cyan-500 h-[2px] w-0 top-full left-0 transition-all duration-500 peer-focus:w-full"
    ></span>
    <span class="absolute top-full left-0 text-sm text-red-500">{{ errorMessage }}</span>
  </div>
</template>

<style scoped></style>

I'm using this child component with Vee-Validate in my parent component like so:

<div class="mt-5">
  <CustomInput
    name="Password"
    v-model.trim="password"
    rules="required"
    :password="true"
    :enter="submit"
  />
</div>

However, when I type into the input field, nothing appears. What's puzzling is that the same code works in my other project. I copied it to this project, but it doesn't work here.

Any insights on why the input field isn't updating as expected would be greatly appreciated. Thank you!"