JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <v-comment
    v-for="(n, i) in comments"
    :text="n.text"
    :comment.sync="n.comment"
    :checked="active === i"
    @select="active = i"
  ></v-comment>
</div>

CSS

.item {
  margin: 10px;
  padding: 10px;
  border: 1px solid silver;
}

JavaScript

Vue.component('v-comment', {
    props: [ 'text', 'comment', 'checked' ],
    template: `
<div class="item"> 
  <label>
    <input
      type="radio"
      :checked="checked"
      @input="$emit('select')"
    >
    {{ text }}
  </label>
  <label v-if="checked">
    <p>Введите комментарий</p> 
    <textarea
      :value="comment"
      @input="$emit('update:comment', $event.target.value)"
    ></textarea>
  </label>
</div>`,
});

new Vue({
  el: '#app',
  data: {
    active: null,
    comments: [
      { text: 'hello, world!!', comment: '' },
      { text: 'fuck the world', comment: '' },
      { text: 'fuck everything', comment: '' },
    ],
  },
});