Problem with understanding of documentation regarding reactive object and watchEffect (featuring playground)

[cndev123]

I have a simple vue 3 app:

<template>
  <button @click="setter">Click</button>
</template>

<script setup>
import { reactive, watchEffect } from "vue";

const reactiveObject = reactive({ test: [] });

watchEffect(() => {
  console.log("watchEffect", reactiveObject);
});

const setter = () => {
  reactiveObject.test = [];
};
</script>

When I execute it and start to click the button, nothing happens. No console log after each button click.

When I copy this into the playground, I get the console log after each click: here. You have to switch the console to the iFrame where the code is executed to see the output.

The playground console log seems to work because the playground is not using the browser console.log but an own implementation.

Question: What should actually happen? From the way I understand the docu, I would expect to get a console log after every click.
Obviously, I get a log when I switch to watch or when I use console.log("watchEffect", reactiveObject.test);.

I am using v3.2.40 locally and in the playground. Both in development mode.

[liulinboyi]

This behavior is because the Reactivity Object's properties are not accessed, so no dependencies are collected. Modifying the value does not trigger the watchEffect.

So you can use console.log("watchEffect", reactiveObject.test); to collecte the dependency.

Or you can use watch

watch(source, () => {
	// ...
}, { deep: true })

When directly watching a reactive object, the watcher is automatically in deep mode:

const state = reactive({ count: 0 })
watch(state, () => {
  /* triggers on deep mutation to state */
})

https://vuejs.org/api/reactivity-core.html#watch