·
0 min read
The watch hook provides an option that its callback function is called immediately:
<template>
<input v-model="counter" />
</template>
<script setup>
import { ref, watch } from 'vue'
const counter = ref(0)
watch(
counter,
(newValue, oldValue) => {
console.log('The new counter value is: ' + counter.value)
},
{ immediate: true }
)
</script>
This code will generate the output New counter value is: 0 after the setup method is executed initially. It will also
create a log message for all subsequent counter-value changes.
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: Use Multiple v-model Bindings
Sometimes Vue.js components need to have multiple v-model bindings.
Vue Tip: Simple Expressions in Templates
Vue component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.