我在一个网站上有五个问题，每个问题有 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 中执行此操作而不更改我的数据吗？