Vue: route watch will trigger in not active component

[superchangme]

Version

2.2.6

Reproduction link

https://jsfiddle.net/50wL7mdz/28620/

Steps to reproduce

I use keep-alive in three components and write watch route in each component.when route changed, the route watch hook will still trigger in not active component .
Can anyone explain is why?

watch: {
'$route' (to, from) {
this.$refs.dataTable.reset();
}
},
The watch hook may be teardown in not active component.
Can anyone help me?

What is expected?

In my demo,when i enter route /foo ,then leave /foo,then enter /bar,want only trigger 'bar in'

What is actually happening?

roter change will triger all route watch in components that ever loaded
In my demo,when i enter route /foo ,then leave /foo,then enter /bar,will trigger both
'foo in' and 'bar in' and 'dup in'

[yyx990803]

Inactive components are simply moved out of the DOM, they are still reactive to data changes. You can set a flag using activated and deactivated hooks to avoid unnecessary watcher callbacks.

[superchangme]

@yyx990803
I think you mean i should do this

router.beforeEach((to, from, next)=>{
    to.activated=true;
    from.activated=false;
  next();
})

But how i can get its own $route object in component ?