useStorage reactivity between components not working #1595
I think this makes sense. You are essentially initialising two refs in two different components. They are both retrieving their initial value from storage, but they are then independent of each other.
If we unpack
const storageKey = 'key' const initialValue = localStorage.getItem(storageKey) const foo = ref(initialValue) const bar = ref(initialValue) watch(foo, foo => localStorage.setItem(storageKey, foo) watch(bar, bar => localStorage.setItem(storageKey, bar)
In your use case, you need to actually use the same ref in both components. Do this in the usual Vue way by passing it as a prop, injecting it, or exporting the ref from a composable .js/.ts file.
Thanks for your reply.
Also, if you open this link in two separate windows the changes are visible immediately with localStorage acting as a single source of truth: https://vueuse.org/core/usestorage/#demo
This is why I do not understand that it does not work in my case.