Dynamic URL change: Quasar + TypeScript + vue-router

DynamicQuery.vue

<template>
  <q-page padding>
    <b>Search</b>
    <q-form>
      <q-input filled type="text" :value="query" @input="updateQuery" />
    </q-form>
  </q-page>
</template>

<script lang="ts">
import VueRouter from 'vue-router';
import { Route } from 'vue-router';

import { defineComponent, ref } from '@vue/composition-api';

function useQuery(router: VueRouter, route: Route) {
  const query = ref(route.query.q);

  function updateQuery(val: string) {
    query.value = val;
    router.replace({ name: 'main', query: { q: val } });
  }
  return { query, updateQuery };
}

export default defineComponent({
  name: 'DynamicQuery',

  setup(_props, { root }) {
    return {
      ...useQuery(root.$router, root.$route),
    };
  },
});
</script>