Component beforeRouteUpdate not triggered after hmr

[char101]

Reproduction

https://github.com/char101/vue1

Steps to reproduce the bug

1. Run pnpm run dev
2. Click button, verify that the counter is increasing
3. Add a comment on Test.vue to trigger hmr
4. The button is no longer working, when clicking the button for the first time, the url is updated which implies that $router.push is working, but beforeRouteUpdate is not triggered.

Expected behavior

beforeRouteUpdate should still works after hmr.

Actual behavior

beforeRouteUpdate not called after hmr.

Additional information

No response

[char101]

I guess this is because to.matched.components[0].default is a different object after hmr to from.matched.components[0].default.

I would be nice if hmr-ed components can be detected as update in the development environment.

For now I guess the workaround is to only use this.$watch.

[posva]

It's indeed an HMR bug with the options API only (works with onBeforeRouteUpdate()). Contribution welcome!

[char101]

I can't send a pull request but I can verify that removing {flush: 'post' } in

router/packages/router/src/RouterView.ts

Line 135 in 30f8674

{ flush: 'post' }

fixed the problem. The cause is that after hmr, the instances.default value in both to and from routes are null, causing the guard not to be extracted. Although the watch is triggered, it is only run later due to the flush post option.