·
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 BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :