Кнопки столбцов действий не меняются при фильтрации vuetable

Question

У меня есть таблица vuestic с 7 столбцами.

Первые 6 столбцов - это поля таблицы, полученные из таблицы, хранящейся в базе данных.

Последний столбец - это столбец действий с возможностью просмотра, представляющий собой комбинацию двух кнопок - «Детали» и «Удалить».

В зависимости от данных, поступающих из таблицы в БД, в некоторых строках есть кнопки удаления, а в других - нет.

Также я использую сортировку по первым 6 столбцам vuetable. Но моя проблема в том, что когда я сортирую vuetable с одним столбцом, например, например, «Lines Read», все другие столбцы также сортируются, но столбец действий (последний столбец) не изменяется вообще и отображает кнопки втот же порядок.

Я хочу, чтобы кнопки менялись также при изменении данных строки при сортировке. Как я могу это сделать?

TransactionImports.vue

<template>
  <div class="va-row">
    <div class="flex md12 xs12">
      <vuestic-widget headerText="Transaction Imports">
        <div style="float: right; margin-right: 20px;">
          <filter-bar
            @input="onFilterSet"
            label="Search"
            v-model="searchText"
          />
        </div>
        <div v-show="loading" class="data-table-loading">
          <slot name="loading">
            <spring-spinner
              slot="loading"
              :animation-duration="2500"
              :size="70"
              color="#007755"
            />
          </slot>
        </div>
        <vuestic-data-table
          ref="vuestictable"
          v-show="!loading"
          :apiMode="false"
          :tableData="tableData"
          :tableFields="tableFields"
          :defaultPerPage="defaultPerPage"
          :sortFunctions="sortFunctions"
          :paginationPath="paginationPath"
          :queryParams="queryParams"
        />
      </vuestic-widget>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import FilterBar from '../comps/FilterBar'
import { SpringSpinner } from 'epic-spinners'
import ActionColumn from './ActionColumn'
import { getAllTransactionImports } from '../../services/api'

Vue.component('action-column', ActionColumn)
export default {
  name: 'transaction-imports',
  components: {
    FilterBar,
    SpringSpinner
  },
  props: {
    filterablefields: {
      type: Array,
      default: () => [
        'collection',
        'linesRead',
        'outputFilename',
        'totalInserts'
        // 'accountNumbers'
      ]
    }
  },
  data () {
    return {
      loading: false,
      searchText: '',
      imports: [],
      tableFields: [
        {
          name: 'importedOn',
          title: 'Imported On',
          sortField: 'importedOn',
          width: '10%',
          callback: this.formatDate
        },
        {
          name: 'collection',
          title: 'Collection',
          sortField: 'collection',
          width: '20%'
        },
        {
          name: 'linesRead',
          title: 'Lines Read',
          sortField: 'linesRead',
          width: '10%'
        },
        {
          name: 'totalInserts',
          title: 'Total Inserts',
          sortField: 'totalInserts',
          width: '10%'
        },
        {
          name: 'rowsParsed',
          title: 'Rows Parsed',
          sortField: 'rowsParsed',
          width: '10%'
        },
        { 
          name: 'outputFilename',
          title: 'Output',
          sortField: 'outputFilename',
          width: '25%'
        },
        {
          name: '__component:action-column',
          title: '',
          width: '15%'
        }
      ],
      defaultPerPage: 30,
      queryParams: {
        sort: 'sort',
        page: 'page',
        perPage: 'per_page'
      },
      paginationPath: '',
      sortFunctions: {
        'achIncrements': this.sortFunc,
        'collection': this.sortFunc,
        'importedOn': this.sortFunc,
        'linesRead': this.sortFunc,
        'outputFilename': this.sortFunc,
        'rowsParsed': this.sortFunc,
        'totalInserts': this.sortFunc,
      }
    }
  },
  created() {
    this.loadTransImport()
  },
  computed: {
    tableData: {
      get () {
        const txt = new RegExp(this.searchText, 'i')
          let list = this.imports.slice()
          list = list.filter(item => {
            return this.filterablefields.some(field => {
              const val = item[field] + ''
              return val.search(txt) >= 0
            })
          })
          list = {data: list}
          return list
      },
      set () {}
    },
  },
  methods: {
    loadTransImport () {
      let self = this
      self.loading = true
      getAllTransactionImports().then(res => {
        self.$log.debug(res.data)
        self.imports = res.data.sort((item1, item2) => item1.importedOn >= item2.importedOn ? -1 : 1)
        self.tableData = self.imports
        Vue.nextTick(() => self.$refs.vuestictable.$refs.vuetable.refresh())
        self.loading = false
      }).catch(e => {
        self.$log.error(e)
        self.loading = false
      })
    },
    // list filter and pagination
    onFilterSet () {
      const txt = new RegExp(this.searchText, 'i')
      this.tableData = this.imports.slice()
      this.tableData = this.imports.filter(item => {
        return this.filterablefields.some(field => {
          const val = item[field] + ''
          console.log(val.search(txt) >= 0)
          return val.search(txt) >= 0
        })
      })
      Vue.nextTick(() => this.$refs.vuestictable.$refs.vuetable.refresh())
    },
    sortFunc (item1, item2) {
      return item1 >= item2 ? 1 : -1
    },
    formatDate (value) {
      return moment(value).format('MM/DD/YYYY HH:mm')
    }
  }
}
</script>

ActionColumn.vue

<template>
  <div style="height: 100%">
    <button 
      class="btn btn-primary btn-micro"
      @click="importDetails"
    >
      Details
    </button>
    <span v-if="profile.role === 'clerk'" style="margin-left:80px;"></span>
    <button v-if="locked && profile.role === 'admin' || profile.role === 'manager'"
        class="btn btn-danger btn-micro"
        @click="openDeleteModal"
      >
        <span class="fa fa-trash-o"></span>
    </button>
    <vuestic-modal
      ref="deleteModal"
      okText="Delete"
      okClass="btn btn-danger btn-micro"
      cancelClass="btn btn-pale btn-micro"
      @ok="deleteImport"
    >
      <p slot="title">Delete the Import</p>
      <p>This can't be undone</p>
    </vuestic-modal>
  </div>
</template>

<script>
import { deleteTransactionImport } from '../../services/api'

export default {
  name: 'action-column',
  props: {
    rowData: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number
    }
  },
  created () {
    this.loadProfile()
  },
  methods: {
    loadProfile () {
      console.log(this.rowData)
      this.locked = this.rowData.isLocked
      this.profile = this.$store.getters.getProfile
    },
    importDetails () {
      this.$router.push({name: 'transaction-list', params: {importDate: this.rowData.importedOn}})
    },
    openDeleteModal () {
      this.$refs.deleteModal.open()
    },
    deleteImport () {
      // too dangerous to try
      let importID = this.rowData.collection
      deleteTransactionImport(importID).then(res => {
        this.$log.info('deleted')
      })
    }
  }
}
</script>

<style scoped>
/* .circle {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  display: inline-block
} */
</style>

Это таблица Снимок экрана