JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://unpkg.com/vuetable-2@1.7.2/dist/vuetable-2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="app">
  <router-view></router-view>
</div>

JavaScript

Vue.use(Vuetable);

const Info = {
  template: `
<div class="container">
  <router-link to="/">home</router-link>
  <h1>{{ info.name }}</h1>
  <h3>{{ info.str }}</3>
  <h3>{{ info.num }}</3>
</div>`,
  computed: {
    info() {
      return { ...this.$route.params };
    },
  },
};

const Table = {
  template: `
<div class="container">
  <vuetable :api-mode="false" :data="items" :fields="fields">
    <template slot="actions" scope="props">
      <router-link :to="{ name: 'info', params: props.rowData }">
        <button class="btn btn-info btn-sm">
          <span class="glyphicon glyphicon-arrow-right"></span> Info
        </button>
      </router-link>
    </template>
  </vuetable>
</div>`,
  data: () => ({
    items: [
      { id: 1, name: 'Sam', str:  'hello, world!!', num:  69 },
      { id: 2, name: 'Tom', str:  'fuck the world', num: 187 },
      { id: 3, name: 'Dan', str: 'fuck everything', num: 666 },
    ],
    fields: [ 'id', 'name', '__slot:actions' ],
  }),
};

new Vue({
  el: '#app',
  router: new VueRouter({
    routes: [
      { path: '/', component: Table },
      { name: 'info', path: '/info/:id', props: true, component: Info },
    ],
  }),
});