Table.Vue

<template>
    <main>
        <table>
            <thead>
                <tr>
                    <th @click="sort('name')">Name</th>
                    <th @click="sort('birthday')">Birthday</th>
                    <th @click="sort('email')">E-mail</th>
                    <th @click="sort('phone')">Phone</th>
                    <th @click="sort('distance')">Distance</th>
                    <th @click="sort('finance')">Finance</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{user.name}}</td>
                    <td>{{user.birthday}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.distance}}</td>
                    <td>{{user.fiance}}</td>
                </tr>
            </tbody>
        </table>
        <button @click="prevPage">Previous</button>
        <button @click="nextPage">Next</button>
    </main>
</template>
<script>
import axios from 'axios';
export default {
  props: ['id'],
  data() {
    return {
      post: null,
      endpoint: 'src/users.json',
    }
  },
  methods: {
    getUser(id) {
        axios(this.endpoint + id)
        .then(response => {
            this.post = response.data
        })
        .catch( error => {
            console.log(error)
        })
    }
  },
  watch: {
    '$route'() {
      this.getUser(this.id);
    }
  },
  created() {
    this.getUser(this.id);
    }
}
</script>