app_vue2/components/Form/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, useContext, useFetch} from '@nuxtjs/composition-api'
  import {Collection, Model, 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({repository, uri}) {
      const totalEntries = ref(0)
      const entries = ref([] as Collection<Model>)
      const loading = ref(true)
      const options = ref({})

      const {$http} = useContext()

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