index.vue

<template>
  <div class="container">
    <div>
      <logo />
      <h2 class="subtitle">Reactive Router query: {{ myQuery }}</h2>
      <div class="links">
        <a
          class="button--grey"
          @click="handleClick"
        >
          Change Router Query
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api'
import Logo from '~/components/Logo.vue'

export default defineComponent({
  components: {
    Logo
  },

  setup(_, ctx) {
    const route = ctx.root.$route
    const myQuery = computed(() => route.query.myQuery)

    const handleClick = (e: Event) => {
      e.preventDefault()

      ctx.root.$router.push({ query: { myQuery: 'handle my query!' } })
    }

    return {
      myQuery,
      handleClick
    }
  }
})
</script>