vue.js - Vuetify 数据表自定义标头在移动设备中不起作用

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 移动断点值时，似乎不再应用标题模板。

知道我做错了什么吗？

提前致谢。

问候。