I am using VUE3, quasar and typescript in my project, and i always used components defined in my routes(that means i never call components from parent component). I have an index page where products are listed when the user searches and paginates something and go to edit page of the product and go back to index page i want user to see his search state, i mean the keyword and pagination where he left. In short, user needs to see the page as he left. For this i have to prevent page from re-render when going back to previous page. I used keep-alive and all its variations to make this happen. so here is my index.vue where i call the router-view

router-view(v-slot="{ Component }")
  keep-alive
    component(:is="Component" :key="$route.name")

and here is how i declare my routes,

{
   path: 'products',
   name: 'Products',
   component: () => import('@/pages/products/index.vue'),
},

When user clicks any edit button where products are displayed here is the code of the button

q-btn(:to="{ name: 'ProductsDetail', params: { _id: props.row._id } }")

How can i solve this?, i tried every Stackoverflow question to fix this but none of them works. What am i doing wrong?