vue.js – this.$router.push is redirecting multiple times

I created a search option in my blog project

enter image description here

Url of the blog list page is localhost:3000/blogs

enter image description here

In my blog list /blogs/index.vue page i created a BlogList component and passing all the props comming from backend

<BlogList
    :blogs="blogs"
    :total-blog-pages="totalBlogPages"
    @clickCallback="clickCallback"
    @searchBlogs="searchBlogs"
  />

Now in i am calling searchBlogs method from BlogList (Child Component)

searchBlogs() {
      console.log('--- in children ----')
      this.$emit('searchBlogs', this.searchString)
    },

and in my parent which is pages/blogs/index.vue

searchBlogs(searchString) {
      const q = searchString
      this.$router.push({
        path: '/blogs/search',
        params: {
          q,
        },
      })
    },

Now issue is whenerver i searched suppose “server” the url should be like this /blogs/search?q=”server” but intially for a second it is redirect to the correct url but after a second it will again redirected to blogs/index.vue page