Vue-router: beforeRouteUpdate not fired in a child component

[KKSzymanowski]

Version

2.7.0

Reproduction link

https://jsfiddle.net/mdz263j3/1/

Steps to reproduce

Switch the page using one of the 1, 2, 3 buttons.

What is expected?

Two alerts, one coming from the parent component and one from the child component.

What is actually happening?

Only one alert coming from the parent component.

---

Even though the beforeRouteUpdate hook is broken, watching the route works in both the parent and child component:

watch: {
    $route() {
        alert('here');
    }
}

[posva]

The navigation guards are meant to be triggered only on the view components. Furthermore, having the navigation guard twice would be problematic because we call next to decide whereas to move on or not.
You can do what you want with a ref (or a global event bus, it's in vuejs docs): https://jsfiddle.net/tovsuxtL/

[pittkost]

@posva Why would having the navigation guard twice be that problematic? I think using refs or a global event bus makes the whole thing much more imperative, also components then become interdependent which brings unnecessary complexity to the application. I'd suggest to reconsider this issue.

[posva]

Because next should only be called once and the view component should be the one controlling it. Also having a non-view specific component do something based on navigation makes it also harder to test and less reusable.
It doesn't have to be imperative, that's just the example I showed. You can create a plugin that triggers the hook on the children of the view component making it declarative.