JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app" v-cloak>
state: {{ state }}<br/>
localStorage.query: {{ls}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

CSS

#app { line-height: 1.75; }
[v-cloak] { display: none; }

JavaScript

const { createApp, computed } = Vue
const { useStorage } = VueUse

const App = {
  setup() {
     const routeStore = {}
     routeStore.query = {
      tab: 'products',
      subTab: 1,
      search: '',
      article: '',
    }
    console.log(routeStore.query)
    console.log(localStorage.query)
    const state = useStorage('query', routeStore.query,  localStorage,
    { mergeDefaults: true })
    console.log(state.value.subTab)
    console.log(localStorage.query)
    const ls = computed(()=>localStorage.query)
    return { state, ls  }
  }
}

const app = createApp(App)
app.mount('#app')