Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property

Question

I am trying make form validation dynamically, all props from the JSON file here I am passing the props parent to child component and that props using for input v-model.

When enter a letter inside the text input, I am getting the following error

[Vue warn]: Avoid 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"

parent component

<template>
  <!--parent component-->
  <form action="" @submit.prevent="onSubmit">
    <div v-for="formInput_Item in formInput_list" :key="formInput_Item.id">
      <ShortText
        v-if="formInput_Item.type === 'text'"
        :input_id="formInput_Item.input_id"
        :form-input-item="formInput_Item.formInput_Item"
        :label_type="label_type"
        :validations="formInput_Item.validations"
        :is-valid="isValid"
        :value="value"
      />
      <p v-if="!formIsValid" class="text-danger">
        Please fix the above errors and submit again.
      </p>
      <div class="col-12 mt-4">
        <button class="btn btn-primary float-end" type="submit">SUBMIT</button>
      </div>
    </div>
  </form>
</template>

<script>
import ShortText from '@/components/FormInputs/ShortText'

export default {
  components: {
    ShortText,
  },
  data() {
    return {
      label_type: 'floating', // floating, overhead, below, left, right
      formIsValid: true,
      error: this.formInput_list[3].validations.required,
      value: '',
      isValid: true,
    }
  },
  methods: {
    validateForm() {
      this.formIsValid = true
      if (this.value === '') {
        this.isValid = false
        this.formIsValid = false
      }
    },

    onSubmit() {
      console.log(this.isValid)
      console.log('value' + this.value)

      this.validateForm()
      alert('form')
      console.log(this.validateForm())
      if (!this.formIsValid) {
        alert('error')
        return
      }
      alert('succses')
    },
  },
}
</script>

Child component

<template>
  <div>
    <div v-if="label_type === 'floating'">
      <div class="form-outline mt-4">
        <!-- ESlint is complaining about the mutation on this line  -->
        <input v-model="value" type="text" class="form-control" />
        <label for="" class="form-label" style="margin-left: 10px">
          {{ formInput_Item }}
        </label>
        <div class="form-notch">
          <div class="form-notch-leading" style="width: 15px"></div>
          <div class="form-notch-middle" style="width: 100px"></div>
          <div class="form-notch-trailing"></div>
        </div>
      </div>
      <p v-if="!isValid" class="text-danger">
        This field is must not be empty.
      </p>
    </div>

    <div v-else-if="label_type === 'overhead'" class="form-group">
      <label class="form-label" for="timeType">{{ formInput_Item }}</label>
      <input id="timeType" type="text" class="form-control" required />
    </div>
    <div v-else-if="label_type === 'below'" class="form-group">
      <input type="text" class="form-control" required />
      <label class="form-label">{{ formInput_Item }}</label>
    </div>
    <div v-else-if="label_type === 'left'" class="row form-group">
      <div class="col-lg-4">
        <label class="form-label">{{ formInput_Item }}</label>
      </div>
      <div class="col-lg-7">
        <input type="text" class="form-control" required />
      </div>
    </div>
    <div v-else-if="label_type === 'right'" class="row form-group">
      <div class="col-lg-7">
        <input type="text" class="form-control" required />
      </div>
      <div class="col-lg-4">
        <label class="form-label">{{ formInput_Item }}</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    input_id: {
      type: Number,
      required: true,
    },
    formInput_Item: {
      type: String,
      required: true,
    },
    label_type: {
      type: String,
      required: true,
    },
    validations: {
      type: Object,
    },
    value: {
      type: String,
      default: '',
    },
    isValid: {
      type: Boolean,
    },
  },
  data() {
    return {
      error: this.validations.required,
    }
  },
}
</script>