Редактирование отзывов

Не могу разобраться с редактированием отзывов. Мне надо, чтобы после того как я добавил "отзыв", была возможность его отредактировать. Режим редактирования включается после нажатия кнопки над нужным отзывом, затем у нас появляется такая же форма заполнения, как и при добавлении, но, она заполенена добавленными ранее значениями, которые мы можем изменить и сохранить.

Код формы:

Vue.component('product-review', {
    template: `

    <form class="review-form" @submit.prevent="onSubmit">
        <p v-if="errors.length">
            <b>Please correct the following error(s):</b>
            <ul>
                <li v-for="error in errors">{{ error }}</li>
            </ul>
        </p>

        <p>
            <label for="name">Name:</label>
            <input id="name" v-model="name">
        </p>

        <p>
            <label for="review">Review:</label>
            <textarea id="review" v-model="review"></textarea>
        </p>

        <p>
            <label for="rating">Rating:</label>
            <select id="rating" v-model.number="rating">
                <option>5</option>
                <option>4</option>
                <option>3</option>
                <option>2</option>
                <option>1</option>
            </select>
        </p>
        
        <p>Would you recommend this product?</p>
        <label class="vote" for="recommend">
            Yes
            <input id="recommend" type="radio" value="Yes" v-model="recommend"/>
        </label>
        <label class="vote" for="recommend">
            No
            <input id="recommend" type="radio" value="No" v-model="recommend"/>
        </label>

        <p>
            <input type="submit" value="Submit"> 
        </p>

    </form>

 `,
    data() {
        return {
            name: null,
            review: null,
            rating: null,
            recommend: null,
            errors: []
        }
    },


    methods:{
        onSubmit() {
            this.errors = []
            if(this.name && this.review && this.rating && this.recommend) {
                let productReview = {
                    name: this.name,
                    review: this.review,
                    rating: this.rating,
                    recommend: this.recommend

                }
                eventBus.$emit('review-submitted', productReview)
                this.name = null
                this.review = null
                this.rating = null
                this.recommend = null
            } else {
                if(!this.name) this.errors.push("Name required.")
                if(!this.review) this.errors.push("Review required.")
                if(!this.rating) this.errors.push("Rating required.")
                if(!this.recommend) this.errors.push("Recommendation required.")
            }
        }
    }


})

Код вывода отзывов:

Vue.component('product-tabs', {
    props: {
        reviews: {
            type: Array,
            required: false
        }
    },


    template: `
    <div>   
        <ul>
            <span class="tab"
                :class="{ activeTab: selectedTab === tab }"
                v-for="(tab, index) in tabs"
                @click="selectedTab = tab"
            >
                {{ tab }}
            </span>
        </ul>
        <div v-show="selectedTab === 'Reviews'">
            <div >
                <p v-if="!reviews.length">There are no reviews yet.</p>
                <ul v-else>
                    
                    <li v-for="review in reviews">
                        <button style="color: red" v-if="reviews.length" v-on:click="editReview(review)" >Edit</button>
                        <button style="color: red" v-if="reviews.length" v-on:click="falseEditReview" >Close Edit</button>
                        <product-review v-if="editing"></product-review>
                        <p>{{ review.name }}</p>
                        <p>Rating: {{ review.rating }}</p>
                        <p>{{ review.review }}</p>
                        <p>Recommend: {{ review.recommend }}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div v-show="selectedTab === 'Make a Review'">
            <product-review></product-review>
        </div>
    </div>           
 `,
    data() {
        return {
            editing: false,
            tabs: ['Reviews', 'Make a Review'],
            review: {},
            selectedTab: 'Reviews'  // устанавливается с помощью @click
        }
    },

    methods: {
        editReview(review) {
            this.editing = true
            this.review = review
            console.log(review);

        },


        falseEditReview() {
            this.editing = false
        }
    }
})