How to update Answer for each click

I'm making a quiz front-end with "Back" and "Next" buttons. I want to update my answer if I change my answer when I go back. Idk how to update a new answer if I press "Back" and change the answer to a different one.
Secondly, how to fix my result table into bigger one because it looks small eventhough i try to change the width. HTML

<div>
  <div class="user-role">
  <div class="question current">
    <transition name="slide-fade" mode="out-in">
      <div :key="questions[currentQuestion].question" :class="{deactivate: answered == questions.length}">
    <h2>{{questions[currentQuestion].question }}</h2>
    <div class="answers">
  <span v-for="(answer, index) in questions[currentQuestion].answer" :key="index" v-bind:data-index="index" @click="selectAnswer">{{ answer }}</span>
    </div>
    <button class="back-btn" v-on:click="backBtn">Back</button>
    <button class="next-btn" disabled v-on:click="nextBtn">{{ currentQuestion < (questions.length -1) ? "Next" : "Result!" }}</button>
     </div>
    </transition>
  </div>


    <div class="result">
    <div class="success"></div> 
  <h2>Your score is:</h2>
  <h1 :class="[(Number(((correctAnswers / questions.length) *100)).toFixed(2) >= 50)]">{{ Number(((correctAnswers / questions.length) *100)).toFixed(2) }}%</h1>
  <small><b>{{ correctAnswers }}</b>Correct, <b>{{ wrongAnswers }}</b>Wrong</small>
  <button v-on:click="Closeresult">CLOSE</button>
  <button class="show-wrong-ones" 
          v-show= "wrongAnswers > 0" 
          @click="showWrongQuestion = true">Wrong answers
  </button>
  </div> 
</div>
<div class="wrong-questions"> 
  <h2 v-if="wrongQuestions.length > 1">Your wrong Questions</h2> 
  <h2 v-else-if="wrongQuestions.length == 1">Your wrong Question</h2>
  <div class="wrong-one" v-for="question in wrongQuestions">
    <h3>{{ question.question }}</h3>
    <div class="answers-container">
      <span class="selected">{{ question.answers[question.selected] }}</span>  
      <span class="correct">{{ question.answers[question.correct_answer] }}</span> 
    </div>
  </div>
  <button id="return-to-result">Show my result</button>
</div>
</div>

CSS

body {
  font: Arial , sans-serif;
background: linear-gradient(#2d8dcb, #F0FFFF); 
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

h1.main{
  font-weight: 100;
  color:    #FFFFFF;
  text-align: center;
  margin: 0;
}

.user-role {
  transition: opacity .2s ease;
}

.user-role.mute {
  opacity: .5;
}

.question{
  max-width: 650px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-250%);
  background-color: rgba(255, 255, 255, .25);
  color: #FFFFFF;
  padding: 10px;
  border-radius: 4px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  font-size: 30px;
}

.question.current {
  transform: translateY(-50%) translateX(-50%);
}

.wrong.current {
  transform: translateY(-50%) translateX(-50%);
}

.question.blur {
  filter: blur(2px);
  pointer-events: none;
}

.deactivate {
  pointer-events: none;
}

.question h2{
  min-width: calc(100% - 20px);  
  max-width: calc(100% - 20px);
  background-color: transparent;
  font-weight: 100;
  padding: 0;
  border-radius: 3px; 
}

.question .answers {
  display: flex;
  flex-wrap: wrap;
    color: #FFFFFF;
}
.question .answers span{
  display: inline-block;
  width: calc(50% - 5px);
  max-width: calc(50% - 5px);
  background-color: rgba(255, 255, 255, .5);
  color: #FFFFFF;
  font-size: 30px;
  margin: 5px 5px 0 0;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}

.question .answers span.selected {
  animation: select-answer .5s ease;
  background-color: #A52A2A;
}

@keyframes select-answer {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
.question .next-question {
  margin-top: 15px;
  padding-right: 5px;
  text-align: right;
}
.question .next-btn {
  background-color: #F0F8FF;
  border: none;
  padding: 3px 20px;
  border-radius: 3px;
  font-size: 1.5em;
  color: #FFFFFF;
  cursor: pointer;
  transition: all .5s ease;
}

.question .next-btn:hover {
  outline: none;
  background-color: #A52A2A;
}

.question .next-btn[disabled] {
  opacity: .6;
  cursor: no-drop;
}
.question .back-btn {
  background-color: #F0F8FF;
  border: none;
  padding: 3px 20px;
  border-radius: 3px;
  font-size: 1.5em;
  color: #FFFFFF;
  cursor: pointer;
  transition: all .5s ease;
}

.question .back-btn:hover {
  outline: none;
  background-color: #A52A2A;
}

.question .back-btn[disabled] {
  opacity: .6;
  cursor: no-drop;
}
.slide-fade-enter-active {
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slide-fade-enter {
  transform: translateY(-40%);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateY(40%);
  opacity: 0;
}

.status {
  font-size: 0.8em;
  margin: 3px auto 0;
  text-align: center;
  padding: 5px;
  border-radius: 2px;
  color: rgba(255, 255, 255, .5);
  transition: color .3s ease;
}
.result{
  max-width: 560px;
  overflow: hidden;
  text-align: center;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 15px;
  border-radius: 5px;
  background-color: #fff;
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.result.active {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.result svg {
  position: absolute;
  opacity: 0.15
}

.result .success {
  position: absolute;
  top: -10px;
  left: 10px;
  width: calc(100% - 20px);
  height: 100%;
  opacity: 0.1;
}

.result h2 {
  font-family: 'Bad Script', cursive;
  font-weight: 400;
  text-align: center;
}

.result h1 {
  font-size: 2.3em;
  font-weight: 400;
  margin-bottom: -10px;
}
.result button {
  position: absolute;
  bottom: 5px;
  background-color: transparent;
  border-radius: 5px;
  color:    #FFFFFF;
  cursor: pointer;
  font-size: 10px;
  transition: box-shadow .2s ease;
}

.result button.close {
  right: 10px;
  padding: 0 15px;
  color: #A52A2A;
  font-size: 25px;
}

.result button.show-wrong-ones {
  left: 10px;
  padding: 5px;
  color: #A52A2A;
  font-size: 20px;
}

.result button:hover {
  box-shadow: 4px 6px 15px 1px #ddd;
}

.green {
  color: #0dcc0d;
}

.red {
  color: #d21d0f;
}

.wrong-questions {
  width: 80vw;    
  max-height: 100vh;
  text-align: center;
  overflow-y: scroll;
  padding: 5px;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  border-radius: 5px;
  background-color:#000000;
  color:#FFFFFF;
  transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrong-questions.active {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.wrong-questions::-webkit-scrollbar-track {
    border-radius: 10px;
}

.wrong-questions::-webkit-scrollbar {
    width: 4px;
}

.wrong-questions::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #e6e6e6;
}

.wrong-questions h2 {
  font-weight: 100;
  margin: 10px 0;
  text-align: center;
  color: #d21d0f;
}

.wrong-questions .wrong-one {
  width: 90%;
  text-align: left;
  margin: 0 auto;
  padding: 3px 7px;
  border-bottom: 1px solid #eee;
}

.wrong-questions .wrong-one h3 {
  font-weight: 100;
}

.wrong-questions .answers-container {
  padding-right: 40px;
}

.wrong-questions .answers-container span {
  display: block;
  padding: 0 7px;
  position: relative;
}

.wrong-questions .answers-container span:after {
  position: absolute;
  top: 0px;
  right: -40px;
  font-weight: 100;
  font-size: .9em;
}

.wrong-questions .answers-container span.selected {
  color: #d21d0f;
}

.wrong-questions .answers-container span.selected:after {
  content: "Yours";
}

.wrong-questions .answers-container span.correct {
  color: #0dcc0d;
}

.wrong-questions .answers-container span.correct:after {
  content: "Correct";
  right: -52px;
}

.wrong-questions button {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 5px;
  color: #d21d0f;
  cursor: pointer;
  font-size: 1.05em;
  font-family: 'Bad Script', cursive;
  transition: box-shadow .2s ease;
}

.wrong-questions button:hover {
  box-shadow: 4px 6px 15px 1px #ddd;
}

JsVue2

Vue.component('display-question',{
    data: function(){
      return{
        showWrongQuestion: false, 
        wrongQuestions: [],
        temp: [],
        currentQuestion: 0,
        answered: 0,
        wrongAnswers: 0,
        correctAnswers: 0,
     questions: [
              {
              question: 'What is the capital of Ukrain ?',
              answer: [
                  'Kyiv',
                  ' Kabul',
                  ' Buenos Aires',
                  ' Praia'
              ],
              correct_answer: 0,
              selected: null,
              sense: 0
              },
              {
              question: 'When was Queen Elizabeth II death ?',
              answer: [
                  '11/09/2022',
                  '08/09/2022',
                  '12/08/2022',
                  '07/09/2022'
              ],
              correct_answer: 1,
              selected: null,
              sense: 0
              },
           {
              question: 'How many bones are there in human body?',
              answer: [
                  '206',
                  '186',
                  '209',
                  '190'
              ],
              correct_answer: 0,
              selected: null,
              sense: 0
              },
           {
              question: 'Who were the 30th president of ?',
              answer: [
                  'Julia Eileen Gillard',
                  'John Winston Howard ',
                  ' Scott John Morrison ',
                  'Anthony Albanese,'
              ],
              correct_answer: 2,
              selected: null,
              sense: 0
              },
           {
              question: 'What is the biggest continent?',
              answer: [
                  'Oceania',
                  'Europe',
                  'Asia',
                  'Africa'
              ],
              correct_answer: 2,
              selected: null,
              sense: 0
              }
          ],
    }},
    
    methods: {
      //select answer function
        selectAnswer: function(a) {
           var choice = a.currentTarget,
              backBtn = document.querySelector('.back-btn'),
              answers = document.querySelectorAll('.answers span'),
              nextBtn = document.querySelector('.next-btn');
            
            answers.forEach(answer => {
              answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
            });
            
            choice.classList.add('selected');
            
            this.questions[this.currentQuestion].selected = choice.dataset.index;
         nextBtn.removeAttribute('disabled');
backBtn.removeAttribute('disabled');
          
 //Back button function     
          },
   backBtn:function () {
      
     var backbutton = this.$el.querySelector('.back-btn'),
    
      answers = this.$el.querySelectorAll('.answers span'),
      questionsLength = this.questions.length,
      result = this.$el.querySelector('.result'),
      question = this.$el.querySelector('.question');
      
     if(!backbutton.hasAttribute('disabled') && this.currentQuestion >= (this.currentQuestion -1)) {    
        this.currentQuestion--;
        
        answers.forEach(answer => {
          answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
        })

      } 
      else if(this.currentQuestion >= (questionsLength -1)) {
        
        this.questions.forEach( (question) => {
          if(question.selected == question.correct_answer && question.sense ==0) {
            
            this.correctAnswers++;
            question.sense = 1;
            
          } else if(question.selected != question.correct_answer && question.sense ==0) {
            
            this.wrongAnswers++;
            question.sense = 1;
            let temp = {};
            temp.answers = question.answers;
            temp.question = question.question;
            temp.correct_answer = question.correct_answer;
            temp.selected = question.selected;
            
            this.wrongQuestions.push(temp);
          }
        });
        result.classList.add('active');
        question.classList.add('blur');
      } 
    },
      //Next button Function
     nextBtn: function() {  
      var nextbutton = this.$el.querySelector('.next-btn'),
    
      answers = this.$el.querySelectorAll('.answers span'),
      questionsLength = this.questions.length,
      result = this.$el.querySelector('.result'),
      question = this.$el.querySelector('.question');
      
     if(!nextbutton.hasAttribute('disabled') && this.currentQuestion < (questionsLength -1)) {    
        this.currentQuestion++;
        
        answers.forEach(answer => {
          answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
        }),
    nextbutton.setAttribute('disabled', '');   
      } 
      else if(this.currentQuestion >= (questionsLength -1)) {
        
        this.questions.forEach( (question) => {
          if(question.selected == question.correct_answer && question.sense ==0) {
            
            this.correctAnswers++;
            question.sense = 1;
            
          } else if(question.selected != question.correct_answer && question.sense ==0) {
            
            this.wrongAnswers++;
            question.sense = 1;
            let temp = {};
            temp.answers = question.answers;
            temp.question = question.question;
            temp.correct_answer = question.correct_answer;
            temp.selected = question.selected;
            
            this.wrongQuestions.push(temp);
          }
        });
        result.classList.add('active');
        question.classList.add('blur');
      } 
    },
     //calculate result
       calculateResult: (questions) => {
        var correct;
        for(var i=0; i< questions.length; i++) {
          this.questions[i].selected == questions[i].correct ?  correct++ : '';
        }
  return (correct / questions.length) * 100;
      },
      //wrong answer button
    wrongAnswersBtn: function() { 
      result.classList.remove('active');
     wrongQuestions.classList.add('active');
    }, 
    //close result  
    Closeresult:function(){
      var  question = this.$el.querySelector('.question'),
        result = this.$el.querySelector('.result');
        result.classList.remove('active');
        question.classList.remove('blur');
      }, 
      showMyResults: function(){
        result.classList.add('active');
        wrongQuestions.classList.remove('active'); 
      },    
    },          
    template: '<div><div class="user-role"><div class="question current"><transition name="slide-fade" mode="out-in"><div :key="questions[currentQuestion].question" :class="{deactivate: answered == questions.length}"><h2>{{questions[currentQuestion].question }}</h2><div class="answers"><span v-for="(answer, index) in questions[currentQuestion].answer" :key="index" v-bind:data-index="index" @click="selectAnswer">{{ answer }}</span></div> <button class="back-btn" v-on:click="backBtn">Back</button> <button class="next-btn" disabled v-on:click="nextBtn">{{ currentQuestion < (questions.length -1) ? "Next" : "Result!" }}</button></div></transition></div><div class="result"><div class="success"></div><h2>Your score is:</h2><h1 :class="[(Number(((correctAnswers / questions.length) *100)).toFixed(2) >= 50)]">{{ Number(((correctAnswers / questions.length) *100)).toFixed(2) }}%</h1><small><b>{{ correctAnswers }}</b>Correct, <b>{{ wrongAnswers }}</b>Wrong</small>  <button class=closeresult v-on:click="Closeresult">Close</button> <button class="show-wrong-ones"v-show= "wrongAnswers > 0"@click="showWrongQuestion = true">Wrong answers</button></div></div><div class="wrong-questions"><h2 v-if="wrongQuestions.length > 1">Your wrong Questions</h2> <div class="wrong-one" v-for="question in wrongQuestions"> <h3>{{ question.question }}</h3><div class="answers-container"></div></div> </div> </div>',
}) 


  var test1 = new Vue({
    el: "#app1",
    data: {
    },
  });