How to determine what causes components to rerender

问题

I am having an issue where when I change a component in my app, many unrelated components seem to be rerendering too. When I use the Vue performance timings config, I see something like (all in the span of about 200ms)

I am trying to figure out what causes these components to rerender. I saw a tip about how to tell the cause of a rerender, but when I put this snippet* in all the rerendering components, I don’t get anything logged to the console.

So, how can I find what is causing all these components to rerender?

*The code I actually put looks like

public mounted() {
    let oldData = JSON.parse(JSON.stringify(this.$data));
    this.$watch(() => this.$data, (newData) => {
      console.log(diff(oldData, newData));
      oldData = JSON.parse(JSON.stringify(newData));
    }, {
      deep: true,
    });
  }

来源：https://stackoverflow.com/questions/64876458/how-to-determine-what-causes-components-to-rerender