Fail to register vue-data-tables as a component

Context

I have an app.js

var Vue = require('vue')
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import DataTables from 'vue-data-tables'

Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(DataTables)
import App from './App.vue'
import PageContent from './components/PageContent.vue'
import MyPage from './components/MyPage.vue'

let router = new VueRouter({
    // router config
}

var dataTables = DataTables.default;
Vue.component('page-content', PageContent);

let MyApp = Vue.component('app', App);
MyApp = new MyApp({
    el: '#app',
    router,
    store
})

This is MyPage.vue

<template>
  <page-content page-title="Supervisor Review">
    <div class="main-content">

     <data-tables 
               :data='this.pending_shots'
               >
        <el-table-column prop="shot_id" label="ID" sortable="custom">
        </el-table-column>
        <el-table-column prop="shot_name" label="Shot" sortable="custom">
        </el-table-column>
        <el-table-column prop="shot_description" label="Description" sortable="custom">
        </el-table-column>
      </data-tables>

    </div>
  </page-content>
</template>

<style src="semantic-ui-css/semantic.min.css" media="screen" title="no title" charset="utf-8" />

<script>
import Vue from 'vue'

export default {
    data () {
        return {
            pending_shots: [],
        }
    },
    created: function() {
        Vue.axios.get(
          'http://server:1234/path/to/api', {
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('access_token')
          }
        })
        .then(response => {
          this.pending_shots = JSON.stringify(response.data)
        })
        .catch((error) => {
          this.pending_shots = error
        })
    }
  }
}
</script>

When I run the app, I get these errors

19:32:08.263 [Vue warn]: Unknown custom element: <el-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DataTables>
       <PageContent> at src/components/PageContent.vue
         <SupervisorReview> at src/components/SupervisorReview.vue
           <Root> 1 6:485:7
    warn webpack-internal:///6:485:7
    createElm webpack-internal:///6:5099:11
    createChildren webpack-internal:///6:5209:9
    createElm webpack-internal:///6:5114:9
    ...
        ...

19:32:08.265 [Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DataTables>
       <PageContent> at src/components/PageContent.vue
         <SupervisorReview> at src/components/SupervisorReview.vue
           <Root> 1 6:485:7
    warn webpack-internal:///6:485:7
    createElm webpack-internal:///6:5099:11
    createChildren webpack-internal:///6:5209:9
    createElm webpack-internal:///6:5114:9
        ...
        ...

Why is <DataTables> above <PageContent> and how can I fix it?

[您可以用中文回复］

njleonzhang / vue-data-tables

Fail to register vue-data-tables as a component #88

Context