Let a watcher stop itself after the first change
In Vue 3.4+, once: true stops a watcher after its first callback. Useful for an interaction that should happen only once per component instance.
<script setup>
import { ref, watch } from 'vue'
const hasEdited = ref(false)
const showHint = ref(true)
watch(hasEdited, () => {
showHint.value = false
}, { once: true })
</script>
<template>
<input @input="hasEdited = true">
<p v-if="showHint">Start typing to edit.</p>
</template>
Adding immediate: true runs the callback immediately and uses up that one execution.