Pinia store reactivity breaks with vue-router on some cases

[valtteriluomapareto]

Reproduction

https://stackblitz.com/edit/vitejs-vite-ci1v82?file=src%2Fstore.ts

Steps to reproduce the bug

I tried to reproduce the bug on StackBlitz.

The example app:
The top component has router-view and links to 3 different pages:

1. Home page shows cumulative xp of all the users in the state, using getter "totalExperience"
2. Select page allows to set state to Pinia store with 2 buttons
3. State page shows the list of users in the store

Steps to reproduce the bug:

1. Check State page, should be empty array
2. Check Home page, total experience should be 0
3. Go to select page, set state by clicking button
4. Go to State page, see that array has values
5. Go to the home page, see that total experience is still 0 -> Should be sum of the xp from the users

Expected behavior

Getter value from the store should update and show the cumulative experience of the User objects on the Home page

Actual behavior

Getter value doesn't update on the Home page

Additional information

If you remove the { path: '/state', component: HelloWorld }, from the routes array in router.ts, the getter works as expected

Also: On the production app where I first noticed this, enabling Vue DevTools in prod with __VUE_PROD_DEVTOOLS__: true, the issue was fixed. This didn't reproduce in StackBlitz example.

[filipenco92]

Hi, I have the same issue, and it started with Vue 3.5.7. With Vue 3.5.6 the Pinia getters it's working fine.

[posva]

If this happens after 3.5.6, it's likely a bug in Vue, not specific to pinia (or router). I would recommend trying to reproduce it without the router first, using pinia playground and try to recreate it with effectScope() (without pinia) to find the bug.

When looking at the changelog and other issues, I see that the behavior is similar to vuejs/core#12033

[valtteriluomapareto]

Thank you for the input. The referenced core repo issue does indeed seems similar.

Unfortunately, I won’t have the time to create another reproduction of the issue myself. However, based on my tests, I can confirm that the bug appears after Vue version 3.5.6 (so in 3.5.7).

If someone else has the bandwidth to try reproducing it in a Pinia playground without Pinia and the router, that would be great.

[skirtles-code]

A couple of bugs related to computed reactivity have been fixed in Vue 3.5.9. I just tested on StackBlitz and it seems to have fixed the problem there. Could you confirm whether this is working for you?

[posva]

Just tested and it works again 🎉