#update:modelValue disables field rule validation - vue.js

Question

Given the following component consuming a Vuetify v-text-field
<script setup lang="ts">
const props = defineProps<{
fieldValue: unknown;
}>();
const emit = defineEmits<{
(e: "update:modelValue", newValue: unknown): void;
}>();
</script>
<!-- This validates -->
<!--
<template>
<v-text-field
label="label"
:rules="[ v => !!v || 'Field is required' ]"
:model-value="fieldValue"
/>
</template>
-->
<!-- This does not validate -->
<template>
<v-text-field
label="label"
:rules="[ v => !!v || 'Field is required' ]"
:model-value="fieldValue"
#update:modelValue="emit('update:modelValue', $event)"
/>
</template>
The problem is that when I attach a listener to #update:modelValue the field rules don't work anymore ( I can clear the field and nothing happens ). When I remove #update:modelValue the field rules are working fine.
Reproduction link
Is something wrong with the code or is it a bug?

Answer 1

The :modelValue prop and #update:modelValue event is an expanded form of v-model which is missing in your example.
So, use v-model in your App.vue, like this-
<MyField v-model.field-value="msg" :field-value="msg" />
Edit---
As per your comments, if you cant use v-model then you can follow this guide from the documentation, and use it like this-
App.vue-
<template>
<v-app>
<v-main>
<MyField :field-value="msg" #update:fieldValue="doSomething"/>
</v-main>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
import MyField from './MyField.vue'
const msg = ref('Hello World!')
const doSomething = (event) => { console.log(event) }
</script>
MyFiled.vue-
<script setup lang="ts">
const props = defineProps<{
fieldValue: unknown;
}>();
const emit = defineEmits<{
(e: "update:fieldValue", newValue: unknown): void;
}>();
</script>
<template>
<v-text-field
label="label"
:rules="[ v => !!v || 'Field is required' ]"
:model-value="fieldValue"
#input="$emit('update:fieldValue', $event.target.value)"
#blur="$emit('update:fieldValue', $event.target.value)"
></v-text-field>
</template>
Working demo