如何使用Bootstrap-Vue从父组件折叠/展开多个动态折叠？

<template>
  <div>
    <b-button v-for="(item, index) in items" :key="index" @click="toggleCollapse(index)">
      {{ item.title }}
    </b-button>
    <b-collapse v-for="(item, index) in items" :key="index" :id="'collapse-' + index" v-model="collapsed[index]">
      <div class="card card-body">
        {{ item.content }}
      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '折叠项1', content: '折叠内容1' },
        { title: '折叠项2', content: '折叠内容2' },
        { title: '折叠项3', content: '折叠内容3' }
      ],
      collapsed: []
    };
  },
  methods: {
    toggleCollapse(index) {
      this.collapsed[index] = !this.collapsed[index];
    }
  }
};
</script>