Vue Tip: Use Lazy v-model to Sync State After Change Events

By default, v-model syncs with the state of the Vue instance on every input event. The .lazy modifier changes the v-model to only sync after change events.

This modifier reduces the number of times our v-model is trying to sync with our Vue instance, which can increase the performance of your Vue application.

Let's take a look at a simple example:

<template>
  <input v-model.lazy="message" />
</template>

<script setup>
import { watch, ref } from 'vue'

const message = ref('')

const saveMessage = () => {
  // do anything with the message
}

watch(message, (newMessage) => {
  saveMessage(newMessage) // only called on change events
})
</script>