Watch route object on vue js

Simple use:

watch: {
    "$route.params.search"(value) {
      //Your code here
    }
  }

In my code i did like the following -

watch:{
    '$route' (to, from){
        // Put your logic here...
    }
},

Don't watch for the $route object inside any other components. Because as the router link changes the component gets destroyed and new component is being mounted. So the watchers for the component gets destroyed. Watch for the $route object inside the root Vue instance where you inject the router object. like the following --

const app = new Vue({
    router,
    watch:{
        '$route' (to, from){
           // Code
        }
    }
}).$mount('#element');

Did you try deep option?

watch: { 
     '$route.params.search': {
        handler: function(search) {
           console.log(search)
        },
        deep: true,
        immediate: true
      }
}

Tags:

Watch

Vue.Js