How to use Lodash debounce in VueJs watch with Typescript

@Watch("variable")debounce(function() {  console.log('wow');}, 500)

isn't a correct syntax. A decorator is supposed to be applied to class member but no name was specified.

There's no straightforward way to use Lodash debounce with Watch decorator because the latter is supposed to be used with prototype method.

It's possible to make it a decorator and chain them but this will likely result in undesirable behaviour because debounce interval will be shared through prototype method between all component instances:

function Debounce(delay: number) {  return (target: any, prop: string) => {    return {        configurable: true,        enumerable: false,        value: debounce(target[prop], delay)    };  }}...@Watch('variable')@Debounce(500)onVariable() { ... }...

This likely should be achieved by debouncing instance method, similarly to how the documentation suggests:

...created() {  this.onDebouncedVariable = debounce(this.onDebouncedVariable, 1000);}@Watch('count')onVariable() {    this.onDebouncedVariable();}onDebouncedVariable() { ... }...

You can use this: https://www.npmjs.com/package/vue-debounce-decorator

And then do this:

  @Watch('value')  @Debounce(300)  private onValueChanged (val: string): void {    // do your thing here  }