Watching a shallowRef array that is inside a store, from a Vue component

[evilmastermind]

Reproduction

https://play.pinia.vuejs.org/#__DEV__eNqNVd9v2jAQ/lesvBAmcFp12iQGiG7qw6atndq+NX0I8QFuE9uynYCE+N93sfMLWrE+YXLffXf3+fJlH1wrRcsCgkkwNanmyhIDtlAkS8R6FgfWxME8FjxXUluyJ9vEphtyICstcxIHmBkH33pxY6WGR3kPK9OhFBc8OcYVBh4qaAMa0EgU+RK0odYMYhGLVAqDzTjQrMWHwyayJ3UCUsz6dUN3HmK1WLh2wxo4IuGQzOZkHwtCKhKZAc3kOoyDXvqk5d0mhhSKJRZYHFR8hz6p53KJ9IMFGtz/SkwjfxUoPP6xkKsMEfiPkOmysFYKskgznr7iBXnihLFbR4m3dc0YSeoK08jjfa6a/+aonBO8N/E0UnWclOOV1MjqswkXTafIu28UJ4dDl3JK2cx4lvQI+S71NOqNHYwCvzjjPFH0xUiB6+pEjusAkky87NWzet8meIzcmYLJx0sttwY05sfBqIEucIMjBqWVMjPjRHGftrFWmUkUpUwgnkHGS00F2EioPHqTs/hCv9DLKOPLCAtFXDDYHZfBjDGD/CPsDXRxQS8/06+OtbyqSfOKtSI94KqgLNbgmq34+kSUVOaKZ6DvlOW4hkfiJFkmt7/cM6sLaFtMN5C+vvP8xex81381oHwlvvBtzCZ6DdaHbx5uYYfnNphLVmSIPhO8B3xFiqpHD/teCIZt93Cu25/ujrlYP5qbnQVhmqGqRp0aDu9k/nFm9K7dK3rVU7FzHpSwtSgGKy5OXMptE9pT53cb1yG+RiPshq/XoN35yCcH2JfzNNi5NG9grQXO+qXCQd3N4I2b2NY20O/aulP/8Ol5Hj49e4MiZFWItJqftMaAXLUOzbRlkhVAVWE24Z/EbmgKPPMnnQgm83D46fLiYlhRVmnddI2f+ghqWP28cdqm81MnfHi8u78544DI2Eyh8UukRef0o24cd3X4LQgO/wBYdE6y

Steps to reproduce the bug

1. add a shallowRef array to a pinia store using composition API
2. add a new element to it, use triggerRef
3. watch the shallowRef from within the store, and the watcher will be triggered
4. use the store in a vue component: watch the shallowRef either from storeToRefs or directly from store.array

Expected behavior

I would expect to be able to watch when a shallowRef array inside a store is being updated, but that does not seem to be the case. Is this a limitation of shallowRef or Pinia, or am I doing something wrong?

Actual behavior

watchers should be triggered by shallowRefs just like any other ref value.

Additional information

In the reproduction I use console.log to check if the watchers are working, and you can see the logs directly from the browser's developer tools.

[posva]

You need deep: true outside of the store

[evilmastermind]

@posva Thank you! Is this going to "unshallow" my array, or will it stay reactive only on the array reference level?

[posva]

No, there isn't an "unshallow" thing 😄 . You can try yourself by changing the button action with numbers.push() and see that the template doesn't update