How can i add parent-child group checkbox to on vuetify datatable?

When i use the vuetify data datable group header feature and when the top group checkbox is selected, i want the checkboxes below it to be selected as well.

Here is the code. https://codepen.io/ersin-g-ven-/pen/LYdeWor?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      sort-by="name"
      group-by="category"
      class="elevation-1"
      show-select
      show-group-by
    >
      <template v-slot:[`group.header`]="{items}">
        <th colspan="2">
          <v-checkbox
            v-model="selected"
            :label="items[0].category"
          ></v-checkbox>
        </th>
      </template>
    </v-data-table>
  </v-app>
</div>