vue.js - @click:row が v-data-table でトリガーされない (Vuetify)

Question

2 つのクリックイベントがある vuetify の v-data-table があります。1つはトリガーされ（deleteBooking）、もう1つはトリガーされません（booking_clicked）?! ボタンはアイテムを削除するためのものです。行クリック イベントは、クリックされた行の追加情報をユーザーに表示することです。

<v-data-table
    item-key="id"
    v-model="selected_bookings"
    :loading="isLoading"
    :items="tmp_bookings"
    :headers="headers"
    :single-select="single_select"
    :hide-default-footer="true"
    @click:row="booking_clicked"
    :footer-props="{
        'items-per-page-options': [-1]
    }"
    class="elevation-1">
        <template slot="item" slot-scope="row">
            <tr>
                <td>{{row.item.booking_text}}</td>
                <td>
                    <v-btn class="mx-2" dark small color="red" @click="deleteBooking(row.item)">
                       <v-icon dark>mdi-delete-forever</v-icon>
                    </v-btn>
                </td>
            </tr>
        </template>
</v-data-table>

booking_clicked(item){
 console.log(item);
}

deleteBooking(booking_item) {
  console.log(booking_item);
},