Vue 3 Migration emitting events in inputs

Question

I am migrating from Vue 2 and Vuetify 2 to Vue 3 and Vuetify 3. In my ChildComponent, I am emitting an $event but it is within a method as shown below. I have attempted to change from @input to v-model after following Vue 3 Migration docs but still faced with a bunch of errors and warnings in console.

Vue 2 Code:

// ChildComponent.Vue
<v-text-field>
    @input="newField"
</v-text-field>

<script>
export default {
    methods: {
        newField($event) {
            this.$emit('field-change', {
                fieldName: this.field.fieldName,
                value: $event
            })
        }
    }
}
</script>

// ParentComponent.vue
<ChildComponent 
    @field-change="handleFieldChange"
/>

With the Vue 3 migration

// ChildComponent.vue
<v-text-field>
    v-model="newField"
</v-text-field>

<script>
export default {
    methods: {
        newField($event) {
            this.$emit('field-change', {
                fieldName: this.field.fieldName,
                value: $event
            })
        }
    }
}
</script>

The warning message that I am getting: [Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "function () { [native code] }", got Function. What am I missing?

Answer 1

According to docs, v-model='newField' on components expands to :model-value='newField' @update:model-value='newField' in Vue 3. The error is easy to understand then.

So use prop @update:model-value='newField'.