title: Vue.js second radio button is selected on app load
body: <p>I have the following Quiz written using Vue.js where everything works like a charm...</p>
  <p>except one thing, which I can't find a solution,
  is it my code causing this bug? or I need approach it differently?</p>
  <p>Update: now that I have added unique names for each element, as one of the answers suggest, The second menu item is always selected by default on page load... any hint on how to overcome this issue?</p>
  <pre><code>&lt;script&gt;
  
      // Create a quiz object with a title and two questions.
  // A question has one or more answer, and one or more is valid.
  var quiz = {
     &quot;title&quot;:&quot;Quizorama&quot;,
     &quot;questions&quot;:[
        {
           &quot;text&quot;:&quot;Lalala&quot;,
           &quot;audio&quot;:&quot;TextTo-1-1.mp3&quot;,
           &quot;responses&quot;:[
              {
                 &quot;text&quot;:&quot;Incorrect&quot;
              },
              {
                 &quot;text&quot;:&quot;Incorrect&quot;
              },
              {
                 &quot;text&quot;:&quot;Correct&quot;,
                 &quot;correct&quot;:true
              }
           ]
        },
        {
           &quot;text&quot;:&quot;Something&quot;,
           &quot;audio&quot;:&quot;57633709.mp3&quot;,
           &quot;responses&quot;:[
              {
                 &quot;text&quot;:&quot;Correct&quot;,
                 &quot;correct&quot;:true
              },
              {
                 &quot;text&quot;:&quot;Incorrect&quot;
              },
              {
                 &quot;text&quot;:&quot;Incorrect&quot;
              }
           ]
        },
        {
           &quot;text&quot;:&quot;Question&quot;,
           &quot;audio&quot;:&quot;57633709.mp3&quot;,
           &quot;responses&quot;:[
              {
                 &quot;text&quot;:&quot;Correct&quot;,
                 &quot;correct&quot;:true
              },
              {
                 &quot;text&quot;:&quot;Incorrect&quot;
              },
              {
                 &quot;text&quot;:&quot;Incorrect&quot;
              }
           ]
        }
     ]
  };
  
  
  &lt;/script&gt;
  
  
  &lt;div class=&quot;wrapper&quot; id=&quot;page-wrapper&quot;&gt;
  
      &lt;div class=&quot;centered-content &quot; id=&quot;content&quot; tabindex=&quot;-1&quot;&gt;
  
          &lt;div class=&quot;row&quot;&gt;
              &lt;main class=&quot;site-main&quot; id=&quot;main&quot;&gt;
  
  
    &lt;div id=&quot;app&quot;&gt;
    &lt;h1&gt;{{ quiz.title }}&lt;/h1&gt;
    &lt;!-- index is used to check with current question index --&gt;
    &lt;div v-for=&quot;(question, index) in quiz.questions&quot;&gt;
      &lt;!-- Hide all questions, show only the one with index === to current question index --&gt;
       &lt;transition name=&quot;slide-fade&quot;&gt; 
      &lt;div v-show=&quot;index === questionIndex&quot;&gt;
        &lt;h2&gt;{{ question.text }}&lt;/h2&gt;
        &lt;audio width=&quot;450&quot; controls :src=&quot;question.audio&quot;&gt;&lt;/audio&gt;
  
        &lt;ul&gt;
      &lt;li v-for=&quot;response in question.responses&quot; 
          v-bind:correctOrNot=&quot;response.correct&quot;
          v-bind:class=&quot;{ active: isActive }&quot;&gt;
        &lt;label&gt;
               &lt;input type=&quot;radio&quot; 
                 v-bind:value=&quot;checkResponse(response.correct)&quot;  
                 v-bind:name=&quot;nameMethod(index ,response.text, 
                 questionIndex)&quot; 
                 v-model=&quot;userResponses[index]&quot;
                 &gt; {{response.text}}
                 
        &lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
        &lt;!-- The two navigation buttons --&gt;
        &lt;!-- Note: prev is hidden on first question --&gt;
        &lt;!-- &lt;button v-if=&quot;questionIndex &gt; 0&quot; v-on:click=&quot;prev&quot;&gt;
          otra oportunidad?
        &lt;/button&gt; --&gt;
        &lt;button v-on:click=&quot;next&quot;&gt;
              Next pleeeeease!
            &lt;/button&gt;
  
      &lt;/div&gt;
   &lt;/transition&gt;
  
    &lt;/div&gt;
    &lt;transition name=&quot;slide-fade&quot;&gt; 
  
    &lt;div v-show=&quot;questionIndex === quiz.questions.length&quot;&gt;
      &lt;h3&gt;
  yer results are da following bro:
  &lt;/h3&gt;
      &lt;p class=&quot;puntaje&quot;&gt;
       {{ score() }} 
      &lt;/p&gt;
  
  
    &lt;/div&gt;
    &lt;/transition&gt; 
  
  &lt;/div&gt;
  
  &lt;script&gt;
  
  
        
  new Vue({
    el: '#app',
  
    data: {
      quiz: quiz,
      // Store current question index
      questionIndex: 0,
      // An array initialized with &quot;false&quot; values for each question
      // It means: &quot;did the user answered correctly to the question n?&quot; &quot;no&quot;.
      userResponses: Array(quiz.questions.length).fill(false),
      isActive: false,
     
    },
  
    // The view will trigger these methods on click
    methods: {
  
  
  checkResponse: function(response){
    let checkResponseValue = response; 
    if (response == true){
      return true;
    } else {
      return false;
    }
  },
  nameMethod: function(index, responseText, questionIndex){
    var index = index;
    var questionIndexValue = questionIndex
    var responseText = responseText;
    var name = index + responseText+'_'+ questionIndexValue;
    return name;
  },
  
      next: function() {    
        
        console.log(this);
  
        this.isActive = true;
  
        setTimeout(() =&gt; {
          // move to next question 
         this.questionIndex++;
  
         this.isActive = false;
  
        }, 3000);
  
      },
  
      updateMessage: function () {
        this.message = 'updated';
        },
      
      // Go to previous question
      prev: function() {
        this.questionIndex--;
      },
      editModal: function(id){
          console.log(id);
      },
  
      // Return &quot;true&quot; count in userResponses
      score: function() {
       let scorePercent = Math.round(this.userResponses.filter(function(val) { return val }).length * 100 / this.questionIndex);
       let newResult;
      
       if(scorePercent == 0 ){
        newResult =  &quot;you suck , not even one good response mate &quot;;
        return newResult
       }
  
       if(scorePercent &lt; 30){
        newResult = scorePercent + &quot;% Was Good, so you need to practice more mate&quot;;
        return newResult
       }
  
       if(scorePercent &lt; 70){
        newResult =  scorePercent + &quot;% yar a ducking star but there is more to improve&quot;;
        return newResult
       }
  
       if(scorePercent == 100){
        newResult = scorePercent + &quot;% you are a godlike creature made flesh&quot;;
        return newResult
       }
       
        }
  
    }
  
  
  });
  
  &lt;/script&gt;
  
  
  &lt;style&gt;
  
  p.puntaje {
      font-size: 25px;
      color: #333333;
      margin-bottom: 40px;
      background: #fce373;
      padding: 13px;
      border-radius: 100px;
      text-align: center;
  }
  
  main#main {
      margin: auto;
  }
  #app h1 {
      font-size: 66px;
      font-weight: 900;
      color: #b1b1b1;
  }
  
  #app h2 {
      font-size: 125px;
      color: #a282bb;
  }
  
  #app ul {
      list-style: none;
      padding: 0;
  }
  
  /* Enter and leave animations can use different */
  /* durations and timing functions.              */
  .slide-fade-enter-active {
    transition: all 0.5s ease;
    transition-delay: 2s;
  
  }
  .slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter
  /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
    transition: all 0.5s ease;
  
  
  }
  #app button {
      background: #00BCD4;
      width: 200px;
      margin-bottom: 30px;
      border-radius: 100px;
      font-size: 17px !important;
      padding: 7px 17px;
      border: none;
  }
  #app li label {
      font-size: 25px;
      background: #fff2b6;
      border-radius: 100px;
      padding-left: 17px;
      padding-right: 17px;
      margin-top: 16px;
      padding-top: 5px;
      transition: all 0.5s ease;
  }
  
  #app li label:hover{
  background: #fce372;
  cursor:pointer;
  transition: all 0.5s ease;
  
  }
  
  li.active label {
      background: #ee734c !important;  transition: all 0.5s ease;
  
  }
  li[correctOrNot=&quot;true&quot;].active label {
    background: #9ad18b !important;  transition: all 0.5s ease;
  
  }
  
  .slide-fade-leave-to
  /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.5s ease;
  
  }
  &lt;/style&gt;
  </code></pre>