Помогите исправить ошибку Vue.js

подскажите пожалуйста в чем может быть ошибка ? В консоле выдает такое сообщение

**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"**




<template>
        <span>
            <span>
                <a class="text-success" href="#" v-if="value == '' || value == null && !keyInputForm" @click.prevent="focus">Добавить</a>
            </span>
              <span v-if="!keyInputForm" class="card-title" @click="focus">{{ value }}</span>
    
            <input
                v-if="keyInputForm"
                ref="edit"
                class="form-control"
                :name="name"
                v-model="value"
                @input="$emit('input', value)"
                @keyup.enter="keyInputForm = false; $emit('edit-field', $event)">
        </span>
    </template>
    
    <script>
        export default {
            props: {
                value: {
                    type: String,
                    required: true
                },
                name: {
                    type: String,
                    required: true
                },
                id: {
                    type: String,
                },
            },
            data() {
                return {
                    keyInputForm: null,
                    thisValue: this.value,
                }
            },
            methods: {
                focus(){
                    this.keyInputForm = true
                    setTimeout(() => {
                        this.$refs.edit.focus();
                    }, 100);
                },
            }
        };
    </script>