Cacher is the code snippet organizer for pro developers

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>Clicked {{ count }} times</p>
    <button @click="onClickBtn(1, 2)">click</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

import _debounce from 'lodash.debounce'

const debounce = (wait, lodashOptions) => (target, key, descriptor) => {
  const callback = descriptor.value;
  if (typeof callback !== 'function') {
    throw new SyntaxError('Only functions can be debounced');
  }
  var fn = _debounce(callback, wait, lodashOptions)
  return {
    ...descriptor,
    value(...args) {
      fn.call(this, ...args)
    }
  };
}

@Component({
  name: 'app'
})
export default class App extends Vue {
  count = 0;

  @debounce(1000, { leading: true, trailing: false })
  onClickBtn() {
    console.log(...arguments) // eslint-disable-line
    this.count ++
  }
}
</script>