I would like to fetch the data for checklist modal dynamically (using an API call to backend server). currently the rendered version shows an integer instead of the actual value.

Modal.vue

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">
                <slot name="button">
                </slot>
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Modal"
}
</script>

<style scoped>

</style>

UserDetailCard.vue

<template>
  <card class="card">
    <div>
      <card class="card" title="Tests">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data="testTable.data">
            <template slot="columns">
              <th>No.</th>
              <th>Date</th>
              <th>Score</th>
              <th></th>
            </template>
            <template slot-scope="{row}">
              <td></td>
              <td>{{row.date}}</td>
              <td>{{row.score}}</td>
              <td>
                <p-button type="success" icon @click.native="showTest(row)">
                  <i class="ti ti-eye"></i>
                </p-button>
              </td>
            </template>
          </paper-table>
        </div>
      </card>
      <card class="card" title="Checklists">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data="checklistTable.data">
            <template slot="columns">
              <th>No.</th>
              <th>Start Date</th>
              <th>End Date</th>
              <th></th>
            </template>
            <template slot-scope="{row}">
              <td></td>
              <td>{{row.startDate}}</td>
              <td>{{row.endDate}}</td>
              <td>
                <p-button type="success" icon @click.native="showChecklist(row)">
                  <i class="ti ti-eye"></i>
                </p-button>
              </td>
            </template>
          </paper-table>
        </div>
      </card>
    </div>
    <modal v-if="showModal" @close="closeModal()">
      <h3 slot="header">{{modalHeader}}</h3>
      <div v-if="modalData===true" slot="body">
        {{ modalData }}
      </div>
      <div v-else slot="body">
        {{ modalData }}
      </div>
      <div slot="button">close</div>
    </modal>
  </card>
</template>
<script>
import {PaperTable} from "@/components";
import Modal from "@/components/Modal"

export default {
  data() {
    let testList = [
      {
        date:"10 Jun",
        score:10
      },
      {
        date:"12 Aug",
        score:4
      },
      {
        date:"04 Sep",
        score:12
      },
    ];

    let checklistList = [
      {
        startDate:"abc",
        endDate:"def"
      },
      {
        startDate:"xyz",
        endDate:"pqr"
      },
      {
        startDate:"pyd",
        endDate:"def"
      }
    ];

    let dataObj = {
      showModal: false,
      user: {},
      testTable: {
        data:[...testList]
      },
      checklistTable: {
        data:[...checklistList]
      },
      modalHeader:null,
      modalData:null
    };
    return dataObj;
  },
  methods: {
    showTest(row) {
      alert("Your data: " + JSON.stringify(row));
      this.modalHeader = "test modal";
      this.modalData = true;
      this.showModal = true;
    },
    async showChecklist(row) {
      alert("Your data: " + JSON.stringify(row));
      this.modalHeader = "list modal";
      this.modalData = await setInterval(()=>{return false;},10000);
      this.showModal = true;
    },
    closeModal(){
      this.modalData = null;
      this.modalHeader = null;
      this.showModal = false;
    }
  },
  components:{
    PaperTable,
    Modal
  }
};
</script>
<style>
</style>