如何取消选中父vue下级中的已回答问题

<template>
  <div>
    <child-component v-for="(question, index) in questions" :key="index"
      :question="question" :answered="answeredQuestions.includes(index)"
      @toggle-answer="toggleAnswer(index)">
    </child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: ['Question 1', 'Question 2', 'Question 3'],
      answeredQuestions: [] // 存储已回答问题的状态
    };
  },
  methods: {
    toggleAnswer(index) {
      if (this.answeredQuestions.includes(index)) {
        // 如果已回答问题的状态中包含当前问题的索引，则取消选中
        const i = this.answeredQuestions.indexOf(index);
        this.answeredQuestions.splice(i, 1);
      } else {
        // 否则，选中当前问题
        this.answeredQuestions.push(index);
      }
    }
  }
};
</script>

<template>
  <div>
    <label>
      <input type="checkbox" v-model="answered" @change="toggleAnswer">
      {{ question }}
    </label>
  </div>
</template>

<script>
export default {
  props: ['question', 'answered'],
  methods: {
    toggleAnswer() {
      this.$emit('toggle-answer', this.answered);
    }
  }
};
</script>