I want to use v-model.lazy with Vuetify

We are using Vue.js and Vuetify on the front end of our product.

I applied v-model.lazy to a Vuetify text field (v-text-field), and it did not work as expected, so I studied.

According to the official Vue.js documentation, v-model.lazy has the following specification.

By default, v-model syncs the input with the data after each input event (with the exception of IME composition as stated above). You can add the lazy modifier to instead sync after change events:

https://vuejs.org/guide/essentials/forms.html#lazy

So I applied the lazy modifier to a Vuetify text field (v-text-field) as shown below, but it did not work as expected (update on change event).

<v-text-field v-model.lazy="name"></v-text-field>

Further study led me to the following Github issues, where I found that the v-model modifier does not support custom components such as Vuetify.

v-text-field v-model lazy doesn’t work #1810

Since v-model is a sugar syntax for writing v-on and v-bind together in one line, you can achieve a process where the change event triggers the update by writing v-on and v-bind separately.

<template>
  <v-text-field :value="name" @change="value => name = value"></v-text-field>
</template>

<script>
export default {
  props: {
    person: Object
  },
  computed: {
    name: {
      get () {
        return this.person.name
      },
      set (name) {
        this.$emit('change', name)
      }
    }
  }
}