Пользовательский заголовок Vuetify datatable не работает на мобильных устройствах

Question

Мне нужно настроить мой заголовок vuetify datatable, производя некоторые вычисления на лету для каждого столбца.

<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 для мобильных устройств.

Есть идеи, что я делаю неправильно?

Заранее спасибо.

С уважением