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


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
        path: '/blogs/search',
        params: {

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