How to make radio button independent of other buttons in vuejs

Question

I'm making a list, I have categories, each category has its intervention and you have to check it based on what corresponds to the problem.

CheckList.vue

<table class="table table-bordered">
          <thead>
            <tr>
              <th rowspan="2" style="vertical-align: top">Categoria</th>
              <th colspan="2">Existe</th>
              <th colspan="3">Estado</th>
              <th colspan="2" rowspan="2" style="vertical-align: top">
                Observación
              </th>
            </tr>
            <tr>
              <th>Si</th>
              <th>No</th>
              <th>Bueno</th>
              <th>Regular</th>
              <th>Malo</th>
            </tr>
          </thead>
          <tbody
            v-for="(formatchecklist, index) in formatchecklists"
            :key="index"
          >
            <tr>
              <td colspan="8" class="table-secondary">
                <em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
              </td>
            </tr>

            <tr
              v-for="intervencion in formatchecklist.intervenciones"
              :key="intervencion.id"
            >
              <td>{{ intervencion.intervencion }}</td>
              <td class="text-center">
                <input
                  type="radio"
                  name="existe"
                  value="si"
                  v-model="checkExiste"
                />
                <label></label>
              </td>
              <td class="text-center">
                <input
                  type="radio"
                  name="existe"
                  value="no"
                  v-model="checkExiste"
                />
                <label></label>
              </td>
              <td class="text-center">
                <input
                  type="radio"
                  name="estado"
                  value="bueno"
                  v-model="checkEstado"
                />
                <label></label>
              </td>
              <td class="text-center">
                <input
                  type="radio"
                  name="estado"
                  value="regular"
                  v-model="checkEstado"
                />
                <label></label>
              </td>
              <td class="text-center">
                <input
                  type="radio"
                  name="estado"
                  value="malo"
                  v-model="checkEstado"
                />
                <label></label>
              </td>
              <td>
                <textarea
                  name="observacion"
                  class="form-control"
                ></textarea>
              </td>
              <td>
                <a
                  class="btn btn-warning btn-sm"
                  @click.prevent=""
                  title="Editar"
                >
                  <i class="fas fa-edit"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>

There is no problem when selecting the first radio option. The problem is that when selecting the second radio option in the second row, intervention 2, the first one is deselected.

https://codepen.io/lucascardemil/pen/GRMejWK

How do I get this data

Answer 1

The radios have the same name, so each row with a radio named existe will operate like a radio group, so only one is selected.

In other words, you need to assign a different name to the radio button group for each row. If necessary, you will also need to change the model binding so that the model binding corresponding to each intervention is saved correctly.

The following is my sample code in vuejs 2 for your reference.