V-Model Not Updating Data Function

Question

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>

Answer 1

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://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue

Answer 2

First of all, this code will not work and will cause a syntax error.

  @click="
    decrementValue($event)
    sendChildData(kfData)
  "

You need to separate the functions with a semicolon ;

   @click="
    decrementValue($event);
    sendChildData(kfData)
  "