Vue Quiz application Wrong radio selections code review - vue.js

Question

I am making a simple Vue Quiz application to learn Vue, and I am having some issues I am hoping a code review can help resolve:
with the quiz radio selections, you can select the correct answer but you cannot select each wrong answer it only selects the last one.
I am also trying to figure out how to add the wrong and right roles if the answered were answered, and unanswered if it was unanswered.
the score changes after hitting submit which is not desired.
https://jsfiddle.net/Jamescodes/cgptvn6r/823/
<div id="app">
<header>
<h1>Quiz Application</h1>
</header>
<div class="container">
<h2>{{ quiz.title }}</h2>
<div class="results" v-if="quizComplete">
<h3>Results</h3>
<p>You got {{ score() }} / {{ quiz.questions.length }} questions correct</p>
<span class="percentage">{{ score() }}0 %</span>
</div>
<div class="card" v-for="(question, index) in quiz.questions">
<h4>{{ index + 1 }}. {{ question.text }}</h4>
<code v-html="question.code" v-if="question.code">{{ question.code }} </code>
<ul>
<li v-for="response in question.responses">
<label>
<input #click="questionIndex++;" type="radio" v-bind:value="response.correct" v-bind:name="index" v-model="userResponses[index]"> {{response.text}}
</label>
</li>
</ul>
</div>
<button #click="submit(); quizComplete = true;">Submit</button>
<div class="answerAll">
<p>Answer all questions before submitting. Unanswered questions are displayed in yellow.</p>
</div>
</div>
</div>
// Create a quiz object with a title and four questions.
// A question has one or more answer, and one or more is valid.
var quiz = {
title: 'Quiz 1 - HTML / CSS / JS Practice',
questions: [
{
text: "What is the purpose of HTML and CSS",
responses: [
{text: 'HTML handles the data, CSS handles routing.'},
{text: 'HTML tells the browser what to display, css tell it what style to dispaly it in', correct: true},
{text: 'HTML styles the page ,css make sit interactive.'},
{text: 'HTML makes the page interactive, CSS styles the page.'},
]
}, {
text: "Which of these html tags contains correct syntax?",
responses: [
{text: 'A'},
{text: 'B'},
{text: 'C',correct: true},
]
}, {
text: "What is the output of the following code:",
code:
`<pre>var answer = 5;
for(var i = 0; i < 10; i+=2){
answer+- i;
}
console.log(answer) </pre>`,
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "Question 4",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "Question 5",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "Question 6",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "Question 7",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "Question 8",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "What is the convention for variable naming in javascript",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}, {
text: "What is the difference between == and === in javascript?",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
{text: 'Wrong answer'},
]
}
]
};
new Vue({
el: '#app',
data: {
quiz: quiz,
questionIndex: 0,
// quiz complete
quizComplete: false,
// An array initialized with "false" values for each question
// It means: "did the user answered correctly to the question n?" "no".
userResponses: Array(quiz.questions.length).fill(false)
},
// The view will trigger these methods on click
methods: {
// Return "true" count in userResponses
score: function() {
return this.userResponses.filter(function(val) { return val }).length;
},
submit: function() {
quizComplete = true;
}
}
});