我正在尝试用vue 3做一个 accordion 组件，但是比较的情况对我来说有点奇怪。
我试图在accordionitem即toggle操作中运行一个函数，但无论我做了什么，我都无法更改属性值。我可能在哪里做错了？
我想做的是，mutliple在单击切换功能时？将查看它。如果没有，我想显示任何一个。示例可在下面提到的链接中找到，但我无法使用vue 3执行此操作
Link
faq.vue

<template>
  <accordion id="hello" :content="exampleData1"></accordion>
  <accordion id="hellomultiple" :content="exampleData2" multiple="multiple"></accordion>
</template>
<script setup>
import Accordion from "@/components/Accordion.vue";

const exampleData1 = [
 {
  id: 1,
  active: false,
  title: 'Crushing Spirits',
  details: `
      <p>You can crush me but you can't crush my spirit! Are you crazy? I can't swallow that. Who's brave enough to fly into something we all keep calling a death sphere? It doesn't look so shiny to me.</p>
      <ul>
        <li>I just want to talk.</li>
        <li>It has nothing to do with mating.</li>
        <li>Fry, that doesn't make sense.</li>
      </ul>
    `
 },
 {
  id: 2,
  active: false,
  title: 'Soundtracks',
  details: `
      <p>Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff!</p>
    `
 },
 {
  id: 3,
  active: false,
  title: `The Letter Shaped Like a Man Wearing a Hat`,
  details: `<p>And then the battle's not so bad? You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! Say it in Russian!</p>
      <p>Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
   `
 }
]
const exampleData2 = [
 {
  id: 1,
  active: false,
  title: 'Celebration',
  details: `
      <p>Come on, this is a Bluth family celebration. It's no place for children.</p>
    `
 },
 {
  id: 2,
  active: false,
  title: 'Lighter Fluid and Wine',
  details: `
      <p>But where did the lighter fluid come from? Wine only turns to alcohol if you let it sit. But anyhoo, can you believe that the only reason the club is going under is because it's in a terrifying neighborhood?</p>
    `
 },
 {
  id: 3,
  active: false,
  title: `What's in Oscar's box?`,
  details: `
      <p>In fact, it was a box of Oscar's legally obtained medical marijuana. Primo bud. Real sticky weed.</p>
      <p>Great, now I'm gonna smell to high heaven like a tuna melt!</p>
    `
 }
]
</script>

Accordion.vue

<template>
 <dl class="accordion box" role="presentation">
  <accordion-item
      v-for="item in content"
      :multiple="multiple"
      :item="item"
      :groupId="id"
      :key="item.id">
  </accordion-item>
 </dl>
</template>

<script setup>
import AccordionItem from "@/components/AccordionItem.vue";

const props = defineProps({
 content: {type: Array, required: true},
 multiple: {type: Boolean, required: false},
 id: {type: String, required: false}
})
</script>

AccordionItem.vue

<template>
 <div :id="groupId + '-' + item.id" class="accordion-item" :class="{'is-active': item.active}">
  <dt class="accordion-item-title">
   <button @click="toggle" class="accordion-item-trigger">
    <h4 class="accordion-item-title-text">{{ item.title }}</h4>
    <span class="accordion-item-trigger-icon"></span>
   </button>
  </dt>
  {{ item.active }}
  <transition
      name="accordion-item"
      @enter="startTransition"
      @after-enter="endTransition"
      @before-leave="startTransition"
      @after-leave="endTransition">
   <dd v-show="item.active" class="accordion-item-details">
    <div v-html="item.details" class="accordion-item-details-inner"></div>
   </dd>
  </transition>
 </div>

</template>

<script setup>
const props = defineProps({
 item: {type: Object, required: true},
 multiple: {type: Boolean, required: false},
 groupId: {type: String, required: false}
})

function toggle(event) {
 props.item.active = !props.item.active
}

function startTransition(el) {
 el.style.height = el.scrollHeight + 'px'
}

function endTransition(el) {
 el.style.height = ''
}
</script>