Why do I get "Avoid mutating a prop directly" when using NumericTextField?

Question

I have created a simple view component in VueJS and I'm getting a pretty common error:

void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Here is my code:

<template>
    <numeric-text-field class="mx-auto" label="Head Mass" units="kg" v-model="turbine.head_mass" />
</template>

<script>
import NumericTextField from '@/components/common/NumericTextField'
export default {
  name: 'Turbines',
  components: {
    NumericTextField
  },
  data () {
    return {
      turbine: {}
    }
  }
}
</script>

<style scoped>
</style>

Oddly enough I get the error for modifying "value" but I don't have value in my code. I think this is caused by the indirection layer created by the numeric-text-field. This problem does not exist in my code when I use only normal input text. What is going on here? Is there another special way I'm supposed to hook up the model to my numeric-text-fields other than v-model?

Answer 1

This turns out to be, unbeknownst to me upon original posting, and issue in NumericTextField. I thought that was a standard Vueify component but was added by a coworker. It did not properly handle bidirectional input as pointed out by the comments on the original post.

The trick is to add this.$emit('input', value) from the NumericTextField component in @input like Ohgodwhy suggested.