Buefy таблицы заголовки исчезают

Question

В последнее время я использую таблицы данных Buefy и столкнулся с проблемой. У меня есть нумерация страниц, сортировка и проверяемые строки.

В настоящее время, когда я уменьшаю количество строк, все заголовки таблиц исчезают, за исключением "Порядка" и "Уровня обслуживания". (Уровень ухода полностью опускается прямо рядом с заказом).

Число строк по умолчанию равно 25. Если я опускаюсь ниже, возникает описанная выше проблема. Даже если я поднимусь выше, например, "50", а затем вернусь к 25, проблема возникает.

Вот мой код:

<template lang="pug">
section.dataTable
  b-field.tableHeaders.row(grouped='' group-multiline='')
    .col-sm-8
      div.select-field
        span Show &nbsp;
        b-select(v-model='perPage' style="display:inline-block")
          option(value='5') 5
          option(value='10') 10
          option(value='25') 25
          option(value='50') 50 
          option(value='100') 100
          option(:value='slotRows.length') All
        span
          | &nbsp; entries
    .col-sm-4
      .btn-group.pull-right
        button.btn.btn-default(@click='copy')
          span Copy
        button.btn.btn-default(@click='exportCSV')
          span CSV
        button.btn.btn-default(@click='exportExcel')
          span Excel

  b-table(
    :data='slotRows' 
    :paginated='isPaginated' 
    :per-page='perPage' 
    :current-page.sync='currentPage' 
    :pagination-simple='isPaginationSimple' 
    default-sort='name' 
    :checked-rows.sync='checkedRows' 
    checkable=''
  ) 
    template(slot-scope='props')
      b-table-column(field='order' label='Order' sortable='')
        | {{ props.row.order }}
      b-table-column(field='name' label='Name' sortable='' v-html="props.row.name")
      b-table-column(field='area' label='Area' sortable='' v-html="props.row.area")
      b-table-column(field='careLevel' label='Care Level' sortable='') {{props.row.careLevel | humanizeCareLevel}}
      b-table-column(field='drr' label='DRR' sortable='' v-html="props.row.drr")
      b-table-column(field='arr' label='ARR' sortable='' v-html="props.row.arr")
      b-table-column(field='installationDeviceName' label='Installation Device' sortable='' v-html="props.row.installationDeviceName")
      b-table-column(field='group' label='Group' sortable='' v-html="props.row.group")
      b-table-column(field='checklist' label='Checklist' sortable='' v-html="props.row.checklist")
</template>

Автор сценария:

<script lang="ts">
import {saveAs} from 'file-saver';
import * as Papa from 'papaparse';
import Vue from 'vue';
import * as XLSX from 'xlsx';
import {CareLevels} from '../mixins/HumanizeMixin';
import WebUtil from '../webutil-shim';
import LoadingPanel from './LoadingPanel.vue';
export default Vue.extend({
  mixins: [CareLevels],
  props: {
    webConfig: {
      type: Object,
      required: true,
    },
  },
  data() {
      return {
        headers: ['', 'Order', 'Name', 'Area', 'Level of Care', 'DRR', 'ARR',
        'Installation Device', 'Group', 'Checklist'],
        slotData: [] as any[],
        slotRows: [] as Array<{}>,
        checkedRows: [],
        isPaginated: true,
        isPaginationSimple: false,
        currentPage: 1,
        perPage: 25,
      };
  },
  mounted() {
    this.$_fetchSlots();
  },
  methods:{
    $_fetchSlots(){
      //Fills slotRows with required data -> *WORKS*
    }
  }

Если кто-то знаком с Buefy и знает, как решить эту проблему, ваш совет будет с благодарностью! Спасибо!