Version

3.0.5

Reproduction link

https://codesandbox.io/s/vue3-reactive-92qd8

Steps to reproduce

I have created a sandbox to reproduce the issue.

• Open the sandbox
• Nav to test by clicking the Test link
• Click the ADD button to increase the counter, and the counter displays as well as a doubling value underneath it.
• Nav to dashboard
• Nav back to Test. Now the counter still works but the doubling is frozen(which is a computed value).

What is expected?

After remounting the component, the computed value should still be reactive

What is actually happening?

After remounting the component, the computed value lost its reactivity.

The reactive values are stored in an external js file (store.js) which I think can be used by multiple components.

Just updated the code. It looks like the watchEffect is not working either (reactive ref tripleIt in the code).

Is this an expected behavior?

This is expected behaviour. As the store effectively gets created within setup, all of the watchers and effects are bound to that instance. When that instance gets destroyed, the effects get cleaned up.

We intend to ship a new feature to solve this usecase, which would also be required for Vuex 5 - you can read up on the discussion about that on RFC #212.