`useLocalStorage` should sync with localStorage

Clear and concise description of the problem

I am using the card code component which lets you change the code language ts or js. I use useLocalStorage in my card component to get and set language to show in the card.

However, If I change the language from one card then it doesn’t get reflected in other cards until I refresh or come back from another route.

Playground

Suggested solution

useLocalStorage can accept a arg to allow sync between instances.

Alternative

None

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[harmyderoman]

@nolde don’t be upset. Vueuse already has a solution for you. Just use createGlobalState. Like this

// store.js
import { createGlobalState, useStorage } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => useStorage('vueuse-local-storage', 'initialValue'),
)

[nolde]

@harmyderoman Ooooh that’s interesting. I’ll take a look into that! Thanks a lot mate!