The display contents of v-text-field are not updated immediately

Question

The display contents of v-text-field is not updated immediately.

How to reproduce:

1. Go Vuetify Playground
2. Input more than 10 characters in the text-field.
3. Deleted longer than 10 characters in the text-fields, but not immediately.It will not be deleted during input. It is deleted when focus is removed.

I am using v-text-field in a custom component:

<template>
  <v-text-field clearable
    v-bind="$attrs"
    v-model="data"
    >
  </v-text-field>
</template>
<script setup lang="ts">
  import {ref, computed } from "vue";
  import {} from "vue"

  const props = defineProps<{modelValue:string}>();
  const emits = defineEmits<{
    (e:"update:modelValue", text:string): void;
  }>();

const data = computed({
    get(){
        return props.modelValue;
    },
    set(value:string){
        console.log(value)
        emits("update:modelValue", convert(value))
    }
})

// Delete over 10 chars
const convert = (target:string) =>{
    if(target.length > 10){
        return target.substring(0,10)
    }
    return target;
}
</script>

The parent component uses the custom component as follows:

<template>
  ...
      <custom-text-field v-model="text"></custom-text-field>
  ...
</template>

<script setup lang="ts">
  ...
  const text = ref("");
  ...
</script>

It will be deleted during input.