Why do I need to specify deep: true in Vue watcher inside Pinia store?

[nvmnghia]

This is my sample:

// App.vue
<script setup lang="ts">
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';

import { useStore } from './store.js'

const store = useStore();
const { foo } = storeToRefs(store)

onMounted(() => {
  console.log('nvmnghia mounted')
  setTimeout(() => foo.value.bar++, 1234)
})
</script>

<template>
  <div></div>
</template>

// store.js
import { ref, watch } from 'vue'
import { defineStore } from 'pinia'

export const useStore = defineStore('store', () => {
  const foo = ref({ bar: 1 })
  watch(foo, foo => console.log({ foo }), { deep: true })
  return { foo }
})

If I remove { deep: true }, the watch log isn't printed. Vue docs said watchers are deep by default (their word: "implicit"), why do I still have to specify it?

Furthermore, if I still don't want to set deep, I have to do a React-like modification:

foo.value = { bar: foo.value.bar + 1 }

Pinia docs said storeToRefs() is enough to get reactive, but it doesn't apply here.

I asked the same question on SO, a bit desperate today. Hope someone can help!

[posva]

The example you linked in the docs is talking about a reactive() object but refs are a bit different. There are some extra explanation in the API section

[nvmnghia]

So in all Vue docs, the word reactive object is reserved for only reactive()? I thought it's an umbrella term for both ref() and reactive().

[posva]

It should be an umbrella term. I recommend you to try out a bit with the playground to get a better understanding of the watchers + deep. I personally don't find it that intuitive but it makes sense for performance not to trigger deeply on refs as their value can change. In reactive objects, the value can't change, only nested properties can change, so the watcher has to be deep or it will never trigger.

[nvmnghia]

@posva Hi I want to bump this a little bit. Is this part in the docs apply to Pinia: Integration with External State Systems?

[posva]

Yes, pinia is Vue. So anything that applies to vue reactivity, applies to pinia