Error in beforeMount hook: TypeError: Cannot read property &

Expected behavior Load datatable with results (example is not working)

Actual behavior Error [Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'field' of undefined"

found in

---> at resources/js/components/ExampleFetchData.vue

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/docs/vue/tables/datatables/ External API example (this example is not working) JSON in the format required by mdb-datatable

Here is my code:

<template>
  <mdb-container>
    <mdb-datatable-2
      v-model="data"
      striped
      bordered
      arrows
      :display="3"
    />
  </mdb-container>
</template>
<script>
  import { mdbDatatable2, mdbContainer } from 'mdbvue';
  export default {
    name: 'DatatablePage',
    components: {
      mdbDatatable2,
      mdbContainer
    },
    data() {
      return {
        data: {
            columns: null,
            rows: null
        }
      };
    },
    methods: {
      filterData(dataArr, keys) {
        let data = dataArr.map(entry => {
          let filteredEntry = {};
          keys.forEach(key => {
            if (key in entry) {
              filteredEntry[key] = entry[key];
            }
          });
          return filteredEntry;
        });
        return data;
      },
      async getData(){
        await fetch('https://jsonplaceholder.typicode.com/todos')
        .then(res => res.json())
        .then(json => {
          let keys = ["id", "title", "completed"];
          let entries = this.filterData(json, keys);
          //columns
          this.data.columns = keys.map(key => {
            return {
              label: key.toUpperCase(),
              field: key,
              sort: true
            };
          });
          //rows
          entries.map(entry => this.data.rows.push(entry));
        })
        .catch(err => console.log(err));
      }
    },
    mounted (){
      this.getData();
    }
  };
</script>