How do I use Vue.js debounce filter?

debounce filter has been removed.

Use lodash’s debounce (or possibly throttle) to directly limit calling the expensive method. You can achieve the expected result like this:

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
} 

From documentation.

Your first example is correct:

<input v-model="myInput" v-on="keyup: someAjaxFunction | debounce 500">

With Vue.js 1.0.0-beta.x, the new syntax is:

<input v-model="myInput" on-keyup="someAjaxFunction | debounce 500">

Another method is to debounce the v-model, instead of calling a method.

You can also just create your own debounce function, without any dependencies:

Reusable debounce function

export function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

In your Vue component

data: () => ({
  textModel: 'something'
}),
watch {
  textModel: debounce(function(newVal) {
    this.searchTextDebounced = newVal;
  }, 500),
}