使用Vuetify v-data-table，我想折叠/展开单个组？

<template>
  <v-data-table
    :headers="headers"
    :items="groups"
    item-key="id"
    show-expand
    :expanded.sync="expandedGroups"
  >
    <template v-slot:expanded-item="{ item }">
      <v-data-table
        :headers="subHeaders"
        :items="item.subItems"
        item-key="subId"
      ></v-data-table>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon
        @click="toggleExpand(item)"
        :class="{ 'rotate-180': expandedGroups.includes(item.id) }"
      >
        mdi-chevron-down
      </v-icon>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Group Name', value: 'name' },
        { text: 'Actions', value: 'actions', sortable: false },
      ],
      subHeaders: [
        { text: 'Sub Item Name', value: 'subName' },
        // Add more sub headers if needed
      ],
      groups: [
        {
          id: 1,
          name: 'Group 1',
          expanded: false,
          subItems: [
            { subId: 1, subName: 'Sub Item 1' },
            { subId: 2, subName: 'Sub Item 2' },
          ],
        },
        // Add more groups if needed
      ],
      expandedGroups: [],
    };
  },
  methods: {
    toggleExpand(item) {
      if (this.expandedGroups.includes(item.id)) {
        this.expandedGroups = this.expandedGroups.filter(
          (groupId) => groupId !== item.id
        );
      } else {
        this.expandedGroups.push(item.id);
      }
    },
  },
};
</script>