Pause a watcher while you batch changes

Vue 3.5+ watchers return pause, resume, and stop. Pause a reaction while updating related values, then resume it with the final state.

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

const filters = ref({ query: '', page: 1 })
const appliedFilters = ref({ ...filters.value })

const { pause, resume } = watch(filters, (value) => {
  appliedFilters.value = { ...value }
}, { deep: true })

function resetFilters() {
  pause()
  filters.value.query = ''
  filters.value.page = 1
  resume()
}
</script>

Vue already batches synchronous watcher callbacks. This control is useful when a pause needs to span separate steps. It does not cancel work a previous callback already started.

Read the Vue documentation.