Показать сумму столбца с помощью Vue-bootsrap с использованием данных Boostrap

Question

Я использую vue-bootstrap для отображения отчета в b-таблице, как рассчитать сумму каждого столбца.мой код шаблона

        <template>
  <div>
    <b-card>
      <template slot="header">
        <h3 class="card-title">{{ $t('labels.backend.reports.titles.index') }}</h3>
      </template>
      <template class="pull-right">
        <div id="hideprint" class="pull-right">
          <b-btn class="btn-show pull-right" id="download" variant="secondary" @click="printFacture()">Download Pdf<i class="fe fe-file fe-lg"></i></b-btn>
        </div>
      </template>
      <b-datatable
        ref="datasource"
        @context-changed="onContextChanged"
        search-route="admin.jobcard.jobcardreports"
        delete-route="admin.reports.destroy"
        action-route="admin.reports.batch_action"
        :actions="actions"
        :selected.sync="selected"
      >
        <b-table
          ref="datatable"
          striped
          bordered
          show-empty
          stacked="md"
          no-local-sorting
          :empty-text="$t('labels.datatables.no_results')"
          :empty-filtered-text="$t('labels.datatables.no_matched_results')"
          :fields="fields"
          :items="dataLoadProvider"
          sort-by="reports.created_at"
          :sort-desc="true"
          id="expenses-report"
        >
          <template slot="created_at" slot-scope="row">
            <span>{{ row.item.created_at }}</span>
          </template>
          <template slot="expenses" slot-scope="row">
            {{  totalexpense(row.item.expenses) }}
            <span>$ {{ row.item.expenses }}</span>
          </template>
          <template slot="quote_amount" slot-scope="row">
            <span>$ {{ row.item.quote_amount }}</span>
          </template>
          <template slot="profit" slot-scope="row">
            <span>$ {{ parseFloat(row.item.expenses) - parseFloat(row.item.quote_amount) }}</span>
          </template>
          <template slot="status" slot-scope="row">
            <span v-if="row.item.status == 'received'">Received</span>
            <span v-if="row.item.status == 'assigned'">Assigned</span>
            <span v-if="row.item.status == 'on hold'">On Hold</span>
            <span v-if="row.item.status == 'completed'">Completed</span>
            <span v-if="row.item.status == 'submitted for vetting'">Submitted for Vetting</span>
            <span v-if="row.item.status == 'invoiced'">Invoiced</span>
            <span v-if="row.item.status == 'paid'">Paid</span>
            <span v-if="row.item.status == 'cancelled'">Cancelled</span>
          </template>
          <template slot="bottom-row" :items="dataLoadProvider">
          <td>Total</td>
          <td></td>
          <td>{{total}}</td>
        </template>
        </b-table>
      </b-datatable>
    </b-card>
  </div>
</template>
    <script>
import html2pdf from 'html2pdf.js'
import { setTimeout } from 'timers'

export default {
  name: 'ReportsList',
  data () {
    return {
      model: {
        expenses: []
      },
      selected: [],
      totalexp: 0,
      fields: [
        { key: 'created_at', label: 'Date' },
        { key: 'jobcard_num', label: 'Jobcard #' },
        { key: 'expenses', label: 'Expenses' },
        { key: 'quote_amount', label: 'Quoted Amount' },
        { key: 'profit', label: 'Profit' },
        { key: 'status', label: 'Status' }
      ],
      actions: {
        destroy: this.$t('labels.backend.reports.actions.destroy')
      }
    }
  },
  computed: {
    total: function() {
      return this.model.services.reduce(function(a, c){
        console.log(a, c)
        return a + Number((c.expenses) || 0)}, 0)
    }

  },
  methods: {
    addService() {
      this.model.expenses.push({});
    },
    dataLoadProvider (ctx) {
      return this.$refs.datasource.loadData(ctx.sortBy, ctx.sortDesc)
    },
    onContextChanged () {
      return this.$refs.datatable.refresh()
    },
    onDelete (id) {
      this.$refs.datasource.deleteRow({ report: id })
    },
    printFacture: function () {
      this.HideButtons()
      var elementor = document.getElementById('expenses-report')
      html2pdf(elementor, {
        margin: 1.5,
        filename: 'expensesReport.pdf',
        // image: { type: 'png' },
        html2canvas: { dpi: 900, letterRendering: false },
        jsPDF: { unit: 'cm', format: 'a3', orientation: 'l' }
      })
      setTimeout(() => {
        $('.card-body .row').show()
        $('#download').show()
      }, 2000)
    },
    HideButtons: function () {
      $('.card-body .row').hide()
      $('#download').hide()
    }
  }
}
</script>

Я пробовал это решение Vue Js Как рассчитать значение в таблице и отобразить сумму в нижнем колонтитуле , но я не могу получить значения столбца

добавить шаблон в b-таблицу

    <template slot="bottom-row" :items="dataLoadProvider">
          <td>Total</td>
          <td></td>
          <td>{{total}}</td>
        </template>

Я использовал этот код для расчета

   computed: {
    total: function() {
      return this.model.services.reduce(function(a, c){
        console.log(a, c)
        return a + Number((c.expenses) || 0)}, 0)
    }

  },

Как получить сумму каждого столбца в строке нижнего колонтитула