V-Model Not Updating Data Function

I'm putting together a child component that will pass data back up to its parent each time one of the increment buttons are clicked. But v-model is not updating the data function. Even though the value of the number input field is changing the value of kf_units_leaking stays the same.

<template>
   <div>
        <input
          @click="
            decrementValue($event)
            sendChildData(kfData)
          "
          type="button"
          value="-"
          class="btn button-minus border icon-shape icon-sm lh-0 bg-dark text-light"
          data-field="quantity"
        />
        <input
          id="kfUnitsLeaking"
          type="number"
          step="1"
          v-model="kfData.kf_units_leaking"
          name="quantity"
          class="form-control quantity-field border-0 text-center w-25"
        />
        <input
          @click="
            incrementValue($event)
            sendChildData(kfData)
          "
          type="button"
          value="+"
          class="btn button-plus border icon-shape icon-sm lh-0 bg-dark text-light"
          data-field="quantity"
        />
   </div>
</template>

<script>
export default {
  name: 'audittedKitchenFaucets',
  props: {
    sendChildData: {
      type: Function,
    },
    incrementValue: {
      type: Function,
    },
    decrementValue: {
      type: Function,
    },
  },
  data() {
    return {
      kfData: {
        kf_units_leaking: 0,
      },
    }
  },
}
</script>

This is a problem with reactivity in vue.js. you need to use $set for updating objects based on key and array based on it's index. You can find more info here : https://v2.vuejs.org/v2/api/#vm-set

EDIT

This problem in reactivity is fixed in Vue version 3 and you can directly pass object key to v-model like this working example: https://playcode.io/943725/

Here is the working example of vue version 2 with $Set : https://github.com/mkhani7980/vue-set-example