<template>
  <v-app theme="dark">
    <v-container>
      <v-data-table
        v-model:expanded="expanded1"
        :headers="headers"
        :items="items1"
        hide-default-footer
        return-object
        show-expand
      >
        <template #expanded-row="data"> {{ data.item }} </template>
      </v-data-table>
      <pre>expanded1: {{ JSON.stringify(expanded1) }}</pre>

      <v-divider />

      <v-data-table
        v-model:expanded="expanded2"
        :headers="headers"
        :items="items2"
        hide-default-footer
        return-object
        show-expand
      >
        <template #expanded-row="data"> {{ data.item }} </template>
      </v-data-table>
      <pre>expanded2: {{ JSON.stringify(expanded2) }}</pre>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  const headers = [
    { title: 'Title', value: 'title' },
    { title: 'value', value: 'value' },
  ]

  const items1 = [
    { title: 'A', value: 1 },
    { title: 'B', value: 2 },
    { title: 'C', value: 3 },
  ]

  const items2 = ref([
    { title: 'A', value: 1 },
    { title: 'B', value: 2 },
    { title: 'C', value: 3 },
  ])

  const expanded1 = ref([items1[0]])
  const expanded2 = ref([items2.value[2]])
</script>