When extending a component which uses the composition API, how can you override 'watch' behaviours?

[chrissyast]

I want to extend a third-party component and keep everything the same except there is one watch behaviour which I want to override.

The component is written using Composition API. I don't mind which API my overriding component uses, whichever is easier.

My current code just replicates the existing behaviour...

// MyExtendedComponent.vue
import { ThirdPartyComponent } from 'foo/ThirdPartyComponent'
export default {
    name: 'MyExtendedComponent',
    extends: ThirdPartyComponent,
    setup: ThirdPartyComponent.setup
}

...but the component I'm extending has a watch function which I want to override...

// foo/ThirdPartyComponent.mjs
setup(props, _ref) {
 // ...
  watch(isFocused, val => {
   // behaviour which I want to override
  });
}

What do I need to do on MyExtendedComponent to override this?

[LinusBorg]

This has a short answer: you can't.

[chrissyast]

This seems like a pretty major disadvantage of Composition API compared to Options. This would be so easy in Options.

[LinusBorg]

Well, the composition pattern doesn't really combine well with the inheritance pattern. You kinda need to decide which you want to use.

The way to solve this with composition instead of inheritance would be to extract the shared behavior into a function (composable) that both components can then use in their own setup functions. And then each can add their individual watch() on top of that.

Edit: But I realize that's not in your hands when you deal with 3rd party components.

And that's kinda okay, though. If you really want to nilly-willy override implementation aspects in 3rd-party code, you are basically just asking for a bug to happen as soon as the 3rd party does an internal change that's incompatible with what you changed in your "hack".

[chrissyast]

The term is 'willy-nilly' and why would you make that assumption?

[LinusBorg]

It seems to me that "willy-nilly" comes across as a judgement, which I didn't mean it as. I was trying to express something like "very easily" with it - if it means something else, ignore it - I'm not a native speaker.

Anyway, overriding a watch is overriding an internal implementation detail in my book. Which is not a good idea when working with 3rd party code, in my opinion, so it should not be doable "just like that". Having all internal methods, watches etc of a component exposed as part of the options, and people possibly extending upon those specific options is what makes refactors of Options API components brittle.