Is there something I missed here? Why my row-details seems not work here, it show nothing below the main row. Here is my code:

<b-table v-if="rowData.length > 0" @row-clicked="toggleDetails" :head-variant="headVariant" :fields="columnDef" :items="rowData" :per-page="perPage" :current-page="currentPage" :select-mode="selectMode" :outlined="outlined" :filter-included-fields="filterOn" sticky-header responsive selectable small show-empty hover> <template #cell(hotel_code)="{item}"> {{item.hotel_code}} <button type="button" class="btn in-active" @click="toggleDetails(item)"> <i class="fas fa-chevron-down fa-sm text-secondary"></i> </button> </template> <template #cell(action)="row"> <action-button :dataCell="row" :disabled="showForm" @insert="handleInsert" @edit="handleEdit" @delete="handleDelete"> </action-button> </template> <template #row-details="row"> <table> <tbody> <tr v-for="email in row.item.emails" :key="email"> <td>{{email}}</td> </tr> </tbody> </table> <!-- <tr v-for="email in item.emails" :key="email"> <td>{{email}}</td> </tr> --> </template> </b-table>