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>

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Create Custom v-model Modifier

v-model has some built-in modifiers, but in some cases, you might need to add your custom modifier.

Vue Tip: Debug Computed Properties

We can debug properties by passing computed() a second options object.