How to see which watchers get called in Vue.js?

Question

I have a parent component, with many nested children components inside.

A click on one of my children's components updates the route. The route property is watched on the parent component, and does some actions on change.

This can be extremely difficult to debug if I don't know which component contains the watcher. Is there a way to see which watchers get executed?

Answer 1

Not sure if it helps but you may use the devtools to see which components emit something.

On top of that, you could probably console.log in the watch or emit some additional payload to identify the component more easily.