How to automatically hide comment fields for other radio buttons when clicking on another one with its own field?

Question

Vue.js

I'm new to vue, I'm asking for help: how can I make it so that when switching radiobuttons, a comment field appears only for a specific, selected radiobutton, and the fields that come out for other radiobuttons disappear?
Here is the widget itself https://zweitesherz.github.io/widget/index.html

Vue.component('response-comment', {
    props: ['value','id','type'],
    data() {
        return {
            showComment: false,
            picked: null

        }
    },
         watch: {
             picked (){
                     this.showComment = (this.picked);
             }
         },


    template: `<div class="form_radio"> 

<input  v-model="picked" :id="id" :type="type"  name="radio" :value="value"  :picked = "picked" onchange="document.getElementById(\'submit\').disabled = !this.checked;">

<label :for="id">{{ value }}</label> 


//Вот поле комментария
<label  :for="id"  class="comment" v-if="showComment">

<p>Введите комментарий</p> 
<textarea class="form-control"></textarea>

</label>

</div>`
});


new Vue({
    el: '#firepool',
    data: {

    }
})

Answer 1

In the parent component, store the index/id of the element whose comment field is to be shown. Depending on whether this property is equal to the current index/id, set the value of the parameter that will control the display of the comment field. When clicking on a radio button in a child component, send an event that will update the index/id of the active element in the parent.
https://jsfiddle.net/xwhv9k3u/