vuejs .vue component debounce getting itself as input

Before I started to use .vue components I wrote a component that had the following code working successufuly

import { debounce } from '../utils/debounce';
Vue.component('play-list-manager', {
  ...
  methods: {
    renamePlayList: debounce((oldName, event) => {
      store.dispatch(Actions.renamePlayList(oldName, event.target.value));
      }, 500),
  },
  template: `<input
            type="text"
            v-bind:value="tag.name"
            v-on:keyup="renamePlayList(tag.name, $event)"
            placeholder="... playlist name">`
});

but when I switched to .vue components it does not work anymore

The problem is that the input of debounce it not ('some name', Event) but it now is (function(oldName, event), 500). So it's getting the input of debounce as input.

What is the correct way to add a debounce function.

Just for completion here is my debounce function

export function debounce(func, wait) {
    // we need to save these in the closure
    let timeout;
    let args;
    let context;
    let timestamp;

    return () => {
        // save details of latest call
        context = this;
        args = [].slice.call(arguments, 0);
        timestamp = new Date();

        // this is where the magic happens
        const later = () => {
            // how long ago was the last call
            const last = (new Date()) - timestamp;

            // if the latest call was less that the wait period ago
            // then we reset the timeout to wait for the difference
            if (last < wait) {
                timeout = setTimeout(later, wait - last);

                // or if not we can null out the timer and run the latest
            } else {
                timeout = null;
                func.apply(context, args);
            }
        };

        // we only need to set the timer now if one isn't already running
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
    };
}