vue.js - Vuetify datatable カスタム ヘッダーがモバイルで機能しない

Question

各列に対してその場でいくつかの計算を行うことにより、vuetify データ テーブル ヘッダーをカスタマイズする必要があります。

<template>
  <v-app>
    <v-content>
      <v-data-table
        :headers="headers"
        :items="items"
      >

        <!-- Stop working on mobile size -->
        <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
          {{ parseInt(header.text) + 1 }}
        </template>

      </v-data-table>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    headers: [
      { text: '10', value: 'col1', desc: 'Description of column 1' },
      { text: '20', value: 'col2', desc: '' },
      { text: '30', value: 'col3', desc: 'Description of column 3' },
      { text: '40', value: 'col4', desc: '' }
    ],
    items: [
      {
        col1: 'Frozen Yogurt',
        col2: 159,
        col3: 6.0,
        col4: 24
      },
      {
        col1: 'Ice cream sandwich',
        col2: 237,
        col3: 9.0,
        col4: 37
      },
      {
        col1: 'Frozen Yogurt',
        col2: 159,
        col3: 6.0,
        col4: 24
      },
      {
        col1: 'Ice cream sandwich',
        col2: 237,
        col3: 9.0,
        col4: 37
      }
    ]
  })
}
</script>

モバイルブレークポイントに到達した場合を除いて、うまく機能します。ビューポートの幅が Vuetify モバイル ブレークポイントの値を下回ると、ヘッダー テンプレートが適用されなくなったようです。

私が間違っていることについて何か考えはありますか？

前もって感謝します。

よろしく。