How to change query parameters in vue without reloading component

Question

How do i change the query Parameters without reloading component in Vue with Vue-Router. But pushing new query always reload the component making my api request to rerun

this.router.replace({query: {name: 'John'} })

Answer 1

This one works well in Nuxt, so I guess it's totally fine in Vue (even 3) too.

<button @click="$router.replace({ path: $route.path, query: { plan: 'private' } })">test</button>

It will push the same path you're currently on, but will change the query param in it.

Taken from the official docs: https://router.vuejs.org/guide/essentials/navigation.html