Property in store is not reactive

[webJose]

Reproduction

https://stackblitz.com/edit/github-nu748r?file=src%2FApp.vue

Steps to reproduce the bug

1. Open the demo.
2. Look at the console. A warning will read:

watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

The corresponding code is:

const store = usePeopleStore();
// This watch doesn't work.  store.peopleCount is not reactive.
// It is my understanding that the state properties are reactive.
// Bug?
watch(store.peopleCount, (newVal) => {
  console.log('peopleCount changed: %d', newVal);
});

Expected behavior

The call to watch() should happily accept the state property and the watch should run the callback function.

Actual behavior

The watch() function complains, both as Intellisense in VS Code as well as in runtime in the console log. The callback function never runs.

Additional information

So far, I have written this bug report from the "Pinia's store property is not reactive" standpoint, but it so happens that direct assignment of the store property seems to trigger the reactive nature.

So, bug in Pinia? Or in Vue's watch()? Or not a bug at all and I'm the idiot here? Hehe. Don't be afraid to tell me it's the last one. I am just starting Vue.js, so I may very well be mistaken.

[posva]

It's

watch(() => store.peopleCount, (newVal) => {
  console.log('peopleCount changed: %d', newVal);
});

[webJose]

Hi @posva. I know I can do that. The whole point is that I shouldn't need to do it like that. The watch() function states that it works with reactive objects, and Pinia claims all store properties are reactive, yet, watch() says otherwise.

[posva]

store.peopleCount is not an object, it's likely a number, so it's as if you wrote watch(20, ...), that's why it doesn't work

[webJose]

Yes, a number, you are correct. Maybe then I misunderstand Pinia.

I can do:

peopleStore.peopleCount = newValue;

And that seems to be reactive. Plus, my mind tells me I read or saw in a tutorial that the store properties are reactive, and that reactivity is broken when we destructure.

You seem to be very sure about this, so I guess I won't take more of your time. I'll maybe re-read Pinia's documentation and try to figure this one out by myself.

Yes, if I do:

const { peopleCount } = storeToRefs(peopleStore);
watch(peopleCount, ....);

That works. But this working only makes me think that the property is just a number like you say, but in my mind it contradicts the studies about Pinia, again, because somewhere I learned that the entire store is reactive.

[posva]

This should help: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive

[webJose]

Hey, I have a question, if you all don't mind, related to my initial topic.

I see the following in the Vue devtools:

As pointed out by the red arrow, Vue devtools seems to be telling me that the peopleCount property is reactive. Is it not???