Vue watch unexpectedly called twice

In my case, I have the "watch" in a component and use the component twice on the page, so the "watch" is being registered twice.

Hopefully, it'll help somebody that has the same problem.


My watcher was duplicated because I was extending my BaseComponent in two ways:

  • by the extend() method of the component itself
  • by putting extends: BaseComponent into the options of the "outer" component

I thought you needed to use both pieces of code to extend another component, but apparently this is wrong and can lead to bad side effects.