How to properly organize VueJS dynamic search?

Question

Vue.js

in App.vue

I have a watch that keeps track of this.$route.query

watch: {
    '$route.query': {
      handler: function(query_string) {
        // здесь код
      },
      deep: true,
      immediate: true
    }
  }

and there is a router_push method that adds (or replaces the value of) GET parameters to the path.

router_push(query_string) {
        let query_object = Object.fromEntries(query_string.split("&").map((pair) => pair.split("=")))
        for (let key in router.currentRoute.query) {
          for (let key_inner in query_object) {
            if (key_inner !== key) {
              query_object[key] = router.currentRoute.query[key]
            }
          }
        }
        const result_query_string = Object.entries(query_object)
          .map((pair) => pair.join("="))
          .join("&");
        router.push(`${router.currentRoute.path}?${result_query_string}`).catch(err => console.log(err))
 
      },

Based on the logic, everything should work, but the error
Avoided redundant navigation to current location occurs: "/?search_type=device_title&search=1"

Somehow I need to arrange everything through params, but I don’t know how many GET parameters there will be

Answer 1

throw everything away.
https://router.vuejs.org/ru/guide/essentials/navig... - pass object https://router.vuejs.org/ru/api/#%D1%81%D0%B2%D0 to location %B... set watch on '$route.query' {name: '...', {query: {...}}}