Tengo este cuestionario en formato de opción múltiple donde los usuarios pueden seleccionar una opción por pregunta y enviar sus respuestas al final. Este ejemplo muestra lo que estoy tratando de lograr: [Código de ejemplo w3school][1]

El problema que tengo es que seleccionar una opción en una pregunta anula la selección anterior, lo que significa que solo se puede seleccionar una opción para todo el cuestionario.

Esta es una sección de mi plantilla de formulario:

 <form @submit.prevent="submit"> <div v-for="question in questions" :key="question.id"> <jet-label :for="question.question" :value="question.question" class="font-bold text-lg" /> <div v-for="option in question.options" :key="option.id"> <jet-label :for="option.option" :value="option.option" /> <input :id="option.id" type="radio" :value="option.option" :name="option.question_id" v-model="form.options" /> </div> </div> <div class="flex items-center justify-end mt-4"> <jet-button class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> Submit </jet-button> </div> </form>

Y este es el JS para manejar el enlace de selección de usuario:

 <script setup> ... import { useForm } from '@inertiajs/inertia-vue3' defineProps({ questions: Array }) const form = useForm({ options: [] }) ... </script>

El problema probablemente es que los insumos se consideran pertenecientes a un grupo. ¿Cómo puedo agrupar las entradas en función de la identificación de la pregunta para que la acción de radio seleccionar/deseleccionar sea por pregunta? [1]: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio