How to get relational data using laravel and vue.js

I want to get the user name instead supervisor_id in the table list in Vue.js. this is one to many relationship. supervisor_id is foreign key from user table.

<table class="table table-hover">
              <tbody><tr>
                <th>Bil</th>
                <th>Nama Kerja</th>
                <th>Penyelia Kerja</th>
                <th>Bayaran (RM)</th>
                <th>Tarikh dibuat</th>
                <th>Tarikh Akhir Kerja</th>
                <th>Nama Pekerja</th>
                <th>Kemaskini</th>
              </tr>
              <tr v-for="(work,index) in works.data" :key="work.work_id">
                <td></td>
                <td></td>
                <td></td> //i want to show name instead of id
                <td></td>
                <td></td>
                <td></td>
                <td></td> 

/// this is my script in vue.js

<script>
export default {
  data() {
    return{
      editmode: false,
      works:{},
      index:1,
      users:{},
      form: new Form({
        work_id:'',
        work_name:'',
        description:'',
        payment:'',
        location:'',
        end_date:'',
        worker_id:'',
        application_status:'New',
        supervisor_id:'',
                   })
    }
  },

  computed:{
    filterUser:function(){
      return this.users.data.filter(function(user){
        return user.type === "Penyelia Kerja"
      }) 
    }
  },

  methods:{

    getResults(page = 1) {
            axios.get('api/work?page=' + page)
              .then(response => {
                this.works = response.data;
      });
    },


    loadWork(){
      if(this.$gate.isClerk()){
       // axios.get('api/work').then(({data})=>(this.works = data));
       axios.get('api/work').then(response => (this.works = response.data));
      }
    },

/// this is my work controller

public function index()
{
    return Work::latest()->paginate(10);
}

/// the data in network tab

data: [{work_id: 4, work_name: "Potong rumput", description: "Kawasan tasik dan pejabat", payment: 1200,…}] 0: {work_id: 4, work_name: "Potong rumput", description: "Kawasan tasik dan pejabat", payment: 1200,…} application_status: "New" created_at: "2019-05-19 08:28:06" description: "Kawasan tasik dan pejabat" end_date: "2019-05-30" location: "Pengeli Timur" payment: 1200 supervisor_id: 6 updated_at: "2019-05-19 08:28:06" work_id: 4 work_name: "Potong rumput"

via Chebli Mohamed