如何使用vue.js将API中的数据加载到MDB数据表中

Question

我正在尝试将API中的数据加载到mdb material vue数据表中。我可以替换列，但发现很难显示行。我正在通过axios从我的API调用资源，但是将其附加到该行是问题所在。我正在控制台记录我的数据，所以我确定我正在获取数据，但是仍然无法在视图中显示它

<template>
  <mdb-datatable
    :data="data"
    striped
    bordered
  />
</template>
<script>
/*eslint-disable*/
import axios from 'axios';
import { mdbDatatable } from 'mdbvue';

export default {
  name: 'DatatablePage',
  components: {
    mdbDatatable
  },
  data () {
      return {
       data:{
    columns: [
          {
            label: 'Merchant Name',
            field: 'shopName',
            sort: 'asc'
          },
          {
            label: 'Merchant ID',
            field: 'e1mUserId',
            sort: 'asc'
          },
          {
            label: 'Merchant Mobile Number',
            field: 'mobileNumber',
            sort: 'asc'
          }
        ],
       ppmvs: []
       }
       
       }
  },
  methods: {
      fetchCustomers(){
       axios.get('https://ppmv.herokuapp.com/ppmv/getall', { headers: { Authorization: `Bearer ${localStorage.token}` } })
      .then(response => {
         console.log(response.data.ppmv)
        this.ppmvs = response.data.ppmv
      })
      },
     
    },
    created: function(){
     
      this.fetchCustomers();
    },
    updated: function(){
      this.fetchCustomers();
    },
}
</script>

<style>
th {
  cursor:pointer;
  /* width: 500px !important; */
  white-space: nowrap;
}
tr {
  white-space: nowrap;
}
</style>