Expandable rows don't work inside <q-table> wrapper component - vuejs2

Question

I created a BaseTable component based on q-table:
BaseTable.vue
<template>
<q-table
v-bind="$props"
v-on="$listeners"
>
<!-- Cycling through slots -->
<template v-for="(_, name) in $slots">
<template :slot="name">
<slot :name="name" />
</template>
</template>
<!-- Cycling through scoped slots -->
<template
v-for="(_, name) in $scopedSlots"
#[name]="data"
>
<slot
:name="name"
v-bind="data"
/>
</template>
</q-table>
</template>
<script>
import { QTable } from 'quasar'
export default {
extends: QTable,
props: {
/* Setting defaults */
dense: {
default: true
}
},
created () {
/* TODO: watch out!
We are directly mutating the prop, not a copy */
this.columns.forEach(col => {
col.align = col.align ?? 'left'
})
}
}
</script>
Then I created a specific Table component based on BaseTable:
Table.vue
<template>
<BaseTable
class="fixed-header"
:style="{ 'height': height }"
v-bind="$props"
v-on="$listeners"
>
<!-- Cycling through scoped slots -->
<template
v-for="(_, name) in $scopedSlots"
#[name]="data"
>
<slot
:name="name"
v-bind="data"
/>
</template>
<!-- code I'll show you later -->
</BaseTable>
</template>
<script>
import BaseTable from 'components/base/BaseTable.vue'
export default {
extends: BaseTable,
props: {
/* Custom props */
height: String
},
components: {
BaseTable
}
}
</script>
<style lang="sass">
.fixed-header
.q-table__top,
.q-table__bottom,
thead tr:first-child th
background-color: white
thead tr th
position: sticky
z-index: 1
thead tr:first-child th
top: 0
&.q-table--loading thead tr:last-child th
top: 28.5px
</style>
Now I'm trying to implement what is written here, but it doesn't work:
Table.vue
<template>
<BaseTable
class="fixed-header"
:style="{ 'height': height }"
v-bind="$props"
v-on="$listeners"
>
<!-- Cycling through scoped slots -->
<template
v-for="(_, name) in $scopedSlots"
#[name]="data"
>
<slot
:name="name"
v-bind="data"
/>
</template>
<template #header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
<template #body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
:icon="props.expand ? 'expand_less' : 'expand_more'"
size="md"
padding="0"
flat
round
#click="props.expand = !props.expand"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.value }}
</q-td>
</q-tr>
<q-tr
v-show="props.expand"
:props="props"
>
<q-td colspan="100%">
<div class="text-left">
This is expand slot for row above: {{ props.row.name }}.
</div>
</q-td>
</q-tr>
</template>
</BaseTable>
</template>
<script>
import BaseTable from 'components/base/BaseTable.vue'
export default {
extends: BaseTable,
props: {
/* Custom props */
height: String
},
components: {
BaseTable
}
}
</script>
<style lang="sass">
.fixed-header
.q-table__top,
.q-table__bottom,
thead tr:first-child th
background-color: white
thead tr th
position: sticky
z-index: 1
thead tr:first-child th
top: 0
&.q-table--loading thead tr:last-child th
top: 28.5px
</style>
Desserts.vue
<template>
<Table
:data="data"
:columns="columns"
:rows-per-page-options="[0]"
row-key="name"
height="600px"
/>
</template>
data and columns are taken from Quasar example. What's wrong with my code?