Vuetify Nested datatable row grouping

[hardik-qasolve]

I am able to group header inside datatable.

The working code and output is at vuetify playground

<script>
 export default {
    data () {
      return {
        groupBy: [
          {
            key: 'gluten',
            order: 'asc',
          },
        ],
        headers: [
          {
            title: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            key: 'name',
          },
          { title: 'Calories', key: 'calories' },
          { title: 'Fat (g)', key: 'fat' },
          { title: 'Carbs (g)', key: 'carbs' },
          { title: 'Protein (g)', key: 'protein' },
          { title: 'Iron (%)', key: 'iron' },
        ],
        desserts: [{name:'FrozenYogurt',calories:159,fat:6.0,carbs:24,protein:4.0,iron:'1%',gluten:false,},{name:'Icecreamsandwich',calories:237,fat:9.0,carbs:37,protein:4.3,iron:'1%',gluten:false,},{name:'Eclair',calories:262,fat:16.0,carbs:23,protein:6.0,iron:'7%',gluten:true,more:{name:'Eclair1',calories:11,fat:12,carbs:1,protein:5.0,iron:'17%',gluten:true},},{name:'Cupcake',calories:305,fat:3.7,carbs:67,protein:4.3,iron:'8%',gluten:true,},{name:'Gingerbread',calories:356,fat:16.0,carbs:49,protein:3.9,iron:'16%',gluten:true,},{name:'Jellybean',calories:375,fat:0.0,carbs:94,protein:0.0,iron:'0%',gluten:false,},{name:'Lollipop',calories:392,fat:0.2,carbs:98,protein:0,iron:'2%',gluten:false,},{name:'Honeycomb',calories:408,fat:3.2,carbs:87,protein:6.5,iron:'45%',gluten:true,},{name:'Donut',calories:452,fat:25.0,carbs:51,protein:4.9,iron:'22%',gluten:true,},{name:'KitKat',calories:518,fat:26.0,carbs:65,protein:7,iron:'6%',gluten:true,},],
      }
    },
  }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <v-container fluid>
        <v-data-table
            :headers="headers"
            :items="desserts"
            :group-by="groupBy"
            item-value="name"
        >
        <template v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }" >
            <tr>
                <td :colspan="columns.length">
                    <VBtn
                    size="small"
                    variant="text"
                    :icon="isGroupOpen(item) ? '$expand' : '$next'"
                    @click="toggleGroup(item)"
                    ></VBtn>
                    {{item}}
                    {{ item.value ? 'Contains gluten' : 'Gluten free' }}
                </td>
            </tr>
        </template>
</v-data-table>
</v-container>
</template>

The output is looks like

And, the expected output should be:

(I don't mind to arrange data according to requirement, i can arrange data from server)

"Gluten free" is parent having 4 data, but the nested 2 data should be grouped again with "High calories" header. And so on...

I am using vuetify 3.4.6 version. I even don't mind to have solution for version 2.x.x.

Appreciate any help.