vue.js - ラッパーコンポーネント内でデータテーブルの拡張スロットが機能しない

Question

ラッパーコンポーネント内でデータテーブルの拡張スロットが機能しない

次のように v-data-table の周りにラッパー コンポーネントがあります。

<template>
  <div>
    <wrapper-data-table
            :headers="tableHeaders"
            :items="partLines"
            :expand="expand"
        >
            <template v-slot:items="line">
                <tr @click="line.expanded = !line.expanded">
                    <td>{{ line.item.binLocation }}</td>
                    <td>{{ line.item.reqQuantity }}</td>

                </tr>
            </template>
            <template v-slot:expand="line">
                  <v-card flat>
                     <v-card-text>Peek-a-boo!</v-card-text>
                  </v-card>
           </template>          
        </wrapper-data-table>
   </div>
</template>

ラッパー データ テーブル コンポーネント

<template>
  <div>
    <div>
      <v-data-table
        v-model="selected"
        v-bind.sync="tableProps"
        :expand="expand"
        item-key="name"
      >
        <!-- Pass on all slots -->
        <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot" />

        <!-- Pass on all scoped slots -->
        <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
          <slot :name="slot" v-bind="scope" />
        </template>
      </v-data-table>
    </div>
  </div>
</template>

ほとんど正常に動作するすべてのスコープ スロットを通過しています。ただし、拡張スロットは機能していないようです。ドキュメントの例のように、行をクリックして行を展開したい。

ラッパーなしでデータテーブルを直接使用している場合に機能します。ただし、ラップされている場合、展開はありません。ただし、「拡張」プロップが変更されていることがわかります。