watchEffect not triggering properly with reactive or ref objects

[rafael-lua]

Vue version

v3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/github-qgjzhk-xwmk5z?file=src%2Fpages%2FHome.vue

Steps to reproduce

In a component within <Suspense>, I used the following code snippet:

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

const stateReact = reactive({ count: 0 });
const stateRef = ref({ count: 0 });
watch(stateReact, () => console.log(stateReact)); // triggers
watch(stateRef, () => console.log(stateRef.value), { deep: true }); // triggers
watchEffect(() => console.log('effect react: ', stateReact)); // do not trigger within suspense
watchEffect(() => console.log('effect ref: ', stateRef.value)); // do not trigger within suspense

const onClick = () => {
  stateReact.count++;
  stateRef.value.count++;
  console.log('clicked');
};
</script>

<template>
  <button @click="onClick">test</button>
</template>

Then I open the browser dev tools and look for the logs printed on the console.

What is expected?

I expect 4 logs to be printed to the console each time I click the button. Two for the watch function and two for the watchEffect function. That is, I expected the watchEffect to work just like a watch after the first render.

What is actually happening?

Only the watch() functions are triggering when the ref values changes. The watchEffect only triggers on the initial render.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz
    Memory: 4.68 GB / 7.74 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.9.2 - ~/.nvm/versions/node/v18.17.0/bin/pnpm

Extra: It is windows with wsl2. Brave browser.

Any additional comments?

In my project with nuxt, I noticed that some watchEffects are not triggering. But their equivalent with watch would work just fine. I got help in the vue discord and found that vue alone did not have this problem (playground). Whereas in the nuxt reproduction (stackblitz) the behavior was happening.

With that, I assumed it was a nuxt related issue and opened an issue in the nuxt repository: nuxt/nuxt#23628

They gave a look at it and found out that the same behavior indeed happens with common vue setup, pointing to it being possibly related to suspense with a repro.

That said, in the repro link I sent, I tried to remove suspense, but the behavior seemed to still happen.

[LinusBorg]

Your watchEffects are not equivalent to the watch() variations.

1. The First watch watches a reactive object, so a change to any of that object's properties (i.e. .count) will trigger it.
2. The second one watches a ref, which by default would only react to a reassignment of the ref's .value - but you make it watch all of the nested properties as well with the deep option.
3. Your first watchEffect watches nothing, it just logs the value of the stateReact variable. It accesses no reactive properties, so nothing is being watched, an nothing will ever make this effect run again.
4. Your second watchEffect logs the ref's .value, so it will only run if you reassign the ref to a new value. No reactive properties of the nested object are accessed, so changing the nested object's count property will not make the effect run again.

I'll move this to discussions since this works as designed and it a usage question / understanding problem.

[rafael-lua]

Thank you for the explanation! Since watchEffect will automatically watch for changes, I would have to use these reactive properties themselves for it to know what to track.

But if I may ask, why the vue playground triggers all the four? Given your explanation, the behavior should be the same for all the cases here, correct?

[LinusBorg]

Interesting. Seems to be a problem with the playground, which i think overwrites console.log or something similar, to make the sandbox work.

Would be worth its own issue.

[bitrxjs]

@LinusBorg

Your second watchEffect logs the ref's .value, so it will only run if you reassign the ref to a new value. No reactive properties of the nested object are accessed, so changing the nested object's count property will not make the effect run again.

this seem incorrect
link

[LinusBorg]

This is a bug in the playground, as I mentioned before.

By now there's a proper issue for that playground/repl problem, see vuejs/repl#273

[bitrxjs]

@LinusBorg
Ya, looks like bug in the playground.

what is the difference between these two
watch(stateRef, () => console.log(stateRef.value)) // this doesn't log

watch(stateRef.value, () => console.log(stateRef.value)) // this logs

[LinusBorg]

The first one passes a ref to watch, so the ref's value is being watched.

the second one passes the content of the ref to watch, to the watch just sees that initial value, and it can't react to the ref's value being changed later. What else might, depends on the kind of value that was being passed. if stateRef.value is a reactive object, watch will now observe that object's properties.

[bitrxjs]

const fooState = ref({state: 1})

function someClickHandler() { fooState.value = {state:2} }

function fooHandler() { fooState.value.state = 2 }

how to write one watch fn which will called when any of the above fns r invoked?

I see this as a gotcha which should be documented @ https://vuejs.org/guide/essentials/watchers.html

[LinusBorg]

That's what the deep option would be used for