Vue.js: draw the table with elements, calling the api for each row

I have a vue component:

<template>
  <div class="tableWrapper">
    <md-table
            class="scheduledListJobList"
            v-model="scheduledList"
    >
      <md-table-row :class="item.status" slot="md-table-row" slot-scope="{item}" @click="open(item)">
        <md-table-cell class="nameColumn" md-label="Название задания" to="/upload" >{{ item.name}}</md-table-cell>
        <md-table-cell md-label="Номер билда">{{ item.jobNumber }}</md-table-cell>

      </md-table-row>
    </md-table>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {permissionList} from "../../permission/permission";
import {Job} from "../../api";

export default {
  name: "gg-jobs-list",

  computed: mapState(["scheduledList"]),

  mounted: function(){
    this.$store.dispatch('GET_SCHEDULED_JOBS');
  },
  data: function () {
    return {
     element: null
    };
  },

  methods: {
    open(selected) {
      this.$router.push({ path: '/jobs/' + selected.routeId});
    },
    refresh(){
      Job.getJobs()
    }
  }
};
</script>

It has a scheduleList that has the name and id fields.

I need to output the name field to the table, and then call a method that goes to the backend, with each id field for the sheet elements, gets an object and complements the table.

Here is the method that calls the api:

  refresh(){
      Job.getJobs()
    }

  getJobs: id => getRequest(`/routes/monitoring/jobs/${id}`, null)

From this method, I should return an object with the start and end fields. With these fields, I must add each scheduledList element to the tables.

How can I do this? thank you so much for your help.

Add another computed property as v-model directive value :

 computed:{
        ...mapState(["scheduledList"]),
    scheduledListRefreshed:{
      get(){
        return this.scheduledList.map(item=>{
                 item.jobs=Job.getJobs(item.id);
                 return item;
        },
      set(val){

      }
    }

template :

<template>
  <div class="tableWrapper">
    <md-table
            class="scheduledListJobList"
            v-model="scheduledListRefreshed"
    >
      <md-table-row :class="item.status" slot="md-table-row" slot-scope="{item}" @click="open(item)">
        <md-table-cell class="nameColumn" md-label="Название задания" to="/upload" >{{ item.name}}</md-table-cell>
        <md-table-cell md-label="Номер билда">{{ item.jobNumber }}</md-table-cell>

      </md-table-row>
    </md-table>
  </div>
</template>