app_vue2/components/DataTableComponent.vue

<template>
  <v-col
    cols="12"
    sm="12"
  >
    <v-data-table
      :headers="headers"
      :items="entries"
      :options.sync="options"
      :server-items-length="totalEntries"
      :loading="loading"
      class="elevation-1"
    ></v-data-table>
  </v-col>
</template>

<script lang="ts">
  import {defineComponent, ref} from '@vue/composition-api'
  import {Repository} from "@vuex-orm/core";
  import personActivitiesData from '@/data/personActivitiesData'

  export default defineComponent({
    props: {
      repository:{
        type: Object as () => Repository,
        required: true
      },
      uri:{
        type: String,
        required: true
      },
      headers:{
        type: Array,
        required: true
      }
    },
    setup() {
      const totalEntries = ref(0)
      const entries = ref([])
      const loading = ref(true)
      const options = ref({})

      return {
        entries,
        totalEntries,
        loading,
        options
      }
    },
    async fetch() {
     // const entries = await this.$http.$get(`https://local.new.api.opentalent.fr/api/${this.uri}`)
      const entries = await personActivitiesData()
      this.repository.insert(entries['hydra:member']);
      this.entries = this.repository.all()
      this.totalEntries = entries['hydra:totalItems']
      this.loading = false
    }
  })
</script>