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">
  <poll :questions="questions"></poll>
</div>

CSS

.header {
  padding: 5px;
  text-align: center;
  font-weight: bold;
}

JavaScript

Vue.component('question', {
  props: [  'text', 'answers', 'value' ],
  template: `
<div>
  <div class="header">{{ text }}</div>
  <div v-for="n in answers">
    <label>
      <input
        type="radio"
        name="question"
        @change="$emit('input', n)"
        :checked="n === value"
      >
      {{ n }}
    </label>
  </div>
</div>`,
});

Vue.component('poll', {
  props: [ 'questions' ],
  template: `
<div>
  <div v-if="index < questions.length">
    <div class="header">
      {{ index + 1 }} / {{ questions.length }}
    </div>
    <question
      v-bind="questions[index]"
      v-model="answers[index]"
    />
    <button
      v-show="answers[index]"
      @click="index++"
    >дальше</button>
  </div>
  <div v-else>
    <div class="header">результаты</div>
    <div v-for="(n, i) in questions">
      {{ n.text }} - {{ answers[i] }}
    </div>
    <button @click="index = 0, answers = []">ещё раз</button>
  </div>
</div>`,
  data: () => ({
    index: 0,
    answers: [],
  }),
});

new Vue({
  el: '#app',
  data: {
    questions: [
      { text: '2 x 2?', answers: [ '5', '3', '69', '187' ] },
      { text: 'Ты дурак?', answers: [ 'Да', 'Конечно', 'А как иначе-то?' ] },
      { text: 'Жить хочешь?', answers: [ 'Нет', 'Убейте меня скорее', 'Уже вешаюсь' ] },
    ],
  },
});