vue table bootstrap axios

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <h3 class="vue-title">Simple</h3>
    <div id="app">
      <v-client-table :columns="columns" :data="data" :options="options">
        <a slot="email" slot-scope="props" :href="`mailto:${props.row.email}`">
        {{props.row.email}}
        </a>
      </v-client-table>
    </div>
    <script src="script.js"></script>
  </body>
</html>


Vue.use(VueTables.ClientTable);
var url = "https://randomuser.me/api/?results=5"

new Vue({
  el: "#app",
  data: {
    columns: [
      'gender',
      'email',
      'phone'
    ],
    data: [],
    options: {
      headings: {
        gender: '性別',
        email: 'メールアドレス',
        phone: '電話番号'
      },
      sortable: [
        'email'
      ],
      texts: {
        filterPlaceholder: '検索する'
      }
    }
  },
  created: function() {
    this.getUsers();
  },
  methods: {
    getUsers: function() {
      axios.get(url).then(res =>{
        this.data = res.data.results;
      }).catch(function(error) {
        alert(error)
      })
    }
  }
});

/* Styles go here */