index.vue

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

export default defineComponent({
  components: {
    Logo
  },

  setup(_, ctx) {
    const route = ctx.root.$route
    const state = reactive({ route })

    watch(
      () => ctx.root.$route,
      (r) => {
        state.route = r as any
      }
    )

    const myQuery = computed(() => state.route.query.myQuery)

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

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

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