How to implement debounce in Vue2?

Question

I have a simple input box in a Vue template and I would like to use debounce more or less like this:

Answer 1

Please note that I posted this answer before the accepted answer. It's not correct. It's just a step forward from the solution in the question. I have edited the accepted question to show both the author's implementation and the final implementation I had used.

---

Based on comments and the linked migration document, I've made a few changes to the code:

In template:

In script:

watch: {
  searchInput: function () {
    this.debounceInput();
  }
},

And the method that sets the filter key stays the same:

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

This looks like there is one less call (just the v-model, and not the v-on:input).