import _debounce from 'lodash/debounce'

export default {
  name: 'FeathersVuexInputWrapper',
  props: {
    item: {
      type: Object,
      required: true
    },
    prop: {
      type: String,
      required: true
    },
    debounce: {
      type: Number,
      default: 0
    }
  },
  data: () => ({
    clone: null
  }),
  computed: {
    current() {
      return this.clone || this.item
    }
  },
  watch: {
    debounce: {
      handler(wait) {
        this.debouncedHandler = _debounce(this.handler, wait)
      },
      immediate: true
    }
  },
  methods: {
    createClone(e) {
      this.clone = this.item.clone()
    },
    cleanup() {
      this.$nextTick(() => {
        this.clone = null
      })
    },
    handler(e, callback) {
      debugger
      if (!this.clone) {
        this.createClone()
      }
      const maybePromise = callback({
        event: e,
        clone: this.clone,
        prop: this.prop,
        data: { [this.prop]: this.clone[this.prop] }
      })
      if (maybePromise && maybePromise.then) {
        maybePromise.then(this.cleanup)
      } else {
        this.cleanup()
      }
    }
  },
  render() {
    const { current, prop, createClone } = this
    const handler = this.debounce ? this.debouncedHandler : this.handler

    return this.$scopedSlots.default({ current, prop, createClone, handler })
  }
}

export default {
  name: 'FeathersVuexInputWrapper',
  props: {
    item: {
      type: Object,
      required: true
    },
    prop: {
      type: String,
      required: true
    }
  },
  data: () => ({
    clone: null
  }),
  computed: {
    current() {
      return this.clone || this.item
    }
  },
  methods: {
    createClone(e) {
      this.clone = this.item.clone()
    },
    cleanup() {
      this.$nextTick(() => {
        this.clone = null
      })
    },
    handler(e, callback) {
      if (!this.clone) {
        this.createClone()
      }
      const maybePromise = callback({
        event: e,
        clone: this.clone,
        prop: this.prop,
        data: { [this.prop]: this.clone[this.prop] }
      })
      if (maybePromise && maybePromise.then) {
        maybePromise.then(this.cleanup)
      } else {
        this.cleanup()
      }
    }
  },
  render() {
    const { current, prop, createClone, handler } = this
    return this.$scopedSlots.default({ current, prop, createClone, handler })
  }
}

--- 
+++ 
@@ -1,3 +1,5 @@
+import _debounce from 'lodash/debounce'
+
 export default {
   name: 'FeathersVuexInputWrapper',
   props: {
@@ -8,6 +10,10 @@
     prop: {
       type: String,
       required: true
+    },
+    debounce: {
+      type: Number,
+      default: 0
     }
   },
   data: () => ({
@@ -16,6 +22,14 @@
   computed: {
     current() {
       return this.clone || this.item
+    }
+  },
+  watch: {
+    debounce: {
+      handler(wait) {
+        this.debouncedHandler = _debounce(this.handler, wait)
+      },
+      immediate: true
     }
   },
   methods: {
@@ -28,6 +42,7 @@
       })
     },
     handler(e, callback) {
+      debugger
       if (!this.clone) {
         this.createClone()
       }
@@ -45,7 +60,9 @@
     }
   },
   render() {
-    const { current, prop, createClone, handler } = this
+    const { current, prop, createClone } = this
+    const handler = this.debounce ? this.debouncedHandler : this.handler
+
     return this.$scopedSlots.default({ current, prop, createClone, handler })
   }
 }
Add internal debounce to the input wrapper

This adds a new `debounce` prop to the input-wrapper which allows proper internal debouncing.
