我在一個網站上有五個問題，每個問題有 4 個答案。每個問題只能點擊一個按鈕。我怎樣才能做到這一點？new Vue({  el: '#app',  data: {    answers: {},    currentQuestion: {      examples: {        A: 'Lack zum Lackieren der Computergeh?use',        B: 'Elektrische Energie für die Montagewerkzeuge',        C: 'Silizium zur Herstellung der CPU',        D: 'Schrauben zum Befestigen von Bauteilen',        E: 'Zugekaufte Computergeh?use aus Stahlblech'      },      answers: {        '1': 'Rohstoff',        '2': 'Fremdbauteil',        '3': 'Hilfsstoff',        '4': 'Betriebsstoff'      },      rights: {        A: 3,        B: 4,        C: 1,        D: 3,        E: 2      }    }  },  methods: {    selectedOneAnswerButton(index) {      Array.from(this.answers).forEach(answer => (answer.active = false));      let answer = this.answers[index];      answer.active = !answer.active;      this.$set(this.answers, index, answer);    }  }});<script src="https://cdn.jsdelivr.net/npm/vue"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div id="app"><div      v-bind:key="index"      v-for="(example, index) in currentQuestion.examples"      class="row"    >      <div class="col-md-12">        <p class="p-3 mb-2 bg-dark text-white">{{ example }}</p>      </div>      <div        v-bind:key="index"        v-for="(answer, index) in currentQuestion.answers"        class="col-md-6"      >        <p>          <button            v-bind:class="{              'btn-primary': answer.active,              'btn-secondary': !answer.active            }"            v-on:click="selectedOneAnswerButton(index)"            class="btn btn-lg btn-block"          >            {{ answer }}          </button>        </p>      </div>    </div> </div>那行得通當我第一次需要它時，它起作用了，但當我第二次問一個有 4 個答案的簡單問題時，它不起作用了……而且在當前有四個問題和四個可能答案的情況下當然不行。可以在 VUE.JS 中執行此操作而不更改我的數據嗎？