I have this watcher (inside <script setup>
:
const form = reactive({
body: '',
image: ''
})
watch(() => form.image, () => {
console.log(form.image)
})
which I want to expand to watch two reactive objects:
watch(() => (form.image, form.body), () => {
console.log(form)
})
but this now only watches form.body
. I've been trying to implement this question's answer, but it doesn't seem to work like my watcher with new and old values. I want the watcher to trigger, when both values are updated.
I figured something out. It'll trigger when both values are true. You can put your own conditions in there.
const form = reactive({
body: '',
image: ''
})
watch(() => [form.image, form.body], () => {
if (form.image && form.body) {
console.log(form)
}
})
Like @tao suggested in the comments, if you're working with nested objects, you have to use { deep: true }
in your watcher.
More about deep watchers in the vue docs.