Всем привет, помогите юному падавану решить задачку, есть код

для quiz опросника:
var quiz = {
user: "Dave",

questions: [
{
id: 1,
text: "Сколько комнат должно быть в квартире?",
type: 'checkbox',
responses: [
{ text: "Студия", image: "1.jpg" },
{ text: "1 комнатная", image: "2.jpg" },
{ text: "2 комнатная", image: "3.jpg" },
{ text: "3 комнатная", image: "4.jpg" },
{ text: "4 комнатная", image: "5.jpg" },
],
},

{
id: 2,
text: "HTML document start and end with which tag pairs?",
responses: [
{ text: "HTML", correct: true },
{ text: "WEB" },
{ text: "HEAD" },
{ text: "BODY" },
],
},

{
id: 3,
text: "Which tag is used to create body text in HTML?",
responses: [
{ text: "HEAD" },
{ text: "BODY", correct: true },
{ text: "TITLE" },
{ text: "TEXT" },
],
},
],
},
userResponseSkelaton = Array(quiz.questions.length).fill(null); и есть HTML код <section class="container">
<!--questionBox-->
<div class="questionBox" id="app">
<!-- transition -->
<transition :duration="{ enter: 500, leave: 300 }" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" mode="out-in">
<div class="questionContainer" v-if="questionIndex < quiz.questions.length" :key="questionIndex">
<section class="answerText">
<header>
<img src="Union.svg" alt="log">
</header>
<div class="optionContainer">
<div class="option" v-for="(response, index) in quiz.questions[questionIndex].responses" v-model="response" @click="selectOption(index)" :class="{ 'is-selected': userResponses[questionIndex] === index }" :key="index">
{{response.text}}
<img v-if="response.image" :src="response.image" alt="Изображение ответа">
</div>
</div>
</section>
<section class="questionText">
<img src="Union.png" alt="log">
<!-- questionTitle -->

<h1 class="titleContainer title">{{ quiz.questions[questionIndex].id }}. {{ quiz.questions[questionIndex].text }}</h1>
<!--pagination-->
<nav class="pagination" role="navigation" aria-label="pagination">
<!-- back button -->
<a class="button" v-on:click="prev();" :disabled="questionIndex < 1">
<i class='bx bx-arrow-back'></i> Назад
</a>
<!-- next button -->
<a class="button" :class="{ 'is-active': userResponses[questionIndex] !== null }" v-on:click="next();" :disabled="questionIndex >= quiz.questions.length">
<i class='arrow' ></i> {{ userResponses[questionIndex] !== null ? 'Далее' : 'Next' }}
</a>
</nav>
<!--/pagination-->
</section>
</div>
</transition>
</div>
<!--/questionBox-->
</section> не могу добиться чтобы в первом вопросе было типо чек бокса, чтобы выбрать несколько ответов

Используй codepen.io для прикрепления кода в чате

спасибо, https://codepen.io/Space-Swagman/pen/YzBQKRr