Dynamic URL change: Quasar/Overmind + TypeScript + vue-router

PageSearchInput.vue

<template>
  <q-input clearable filled type="text" :value="q" @input="updateQuery" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from '@vue/composition-api';

export default defineComponent({
  name: 'PageSearchInput',

  setup(_props, { root: { $router, $route, actions, state } }) {
    const q = ref($route.query.q);

    onMounted(() => {
      if (state.PageSearch.query.q) {
        q.value = state.PageSearch.query.q;
        $router.replace({ name: 'search', query: { q: q.value } });
      }
    });

    function updateQuery(val: string) {
      q.value = val;
      $router.replace({ name: 'search', query: { q: val } });
      actions.PageSearch.updateQueryQ(val);
    }

    return { q, updateQuery };
  },
});
</script>

Search.vue

<template>
  <q-page padding>
    <h1>Search</h1>
    <PageSearchInput />
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import PageSearchInput from 'components/PageSearchInput.vue';

export default defineComponent({
  name: 'PageSearch',
  components: {
    PageSearchInput,
  },
});
</script>