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

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>