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>