app_vue2/pages/accesses/list.vue

<template>
  <main>
    <NuxtLink to="/accesses/7351">Exemple fiche</NuxtLink>
    <ListComponent :query="accessesQuery">
      <e-column field='id' headerText='id'></e-column>
      <e-column field='person.name' headerText='Nom'></e-column>
      <e-column field='person.givenName' headerText='Prénom'></e-column>
    </ListComponent>
  </main>
</template>


<script lang="ts">
  import {defineComponent, ref, useContext, useAsync} from '@nuxtjs/composition-api'
  import {Access} from '@/models/Access/Access'

  export default defineComponent({
    setup() {
      const { store } = useContext()
      const accessesQuery = ref(store.$repo(Access).with('person'))

      return {
        accessesQuery
      }
    },
    async asyncData({store, $rest}){
      const repository = store.$repo(Access);
      const entity = repository.getModel().$entity;

      const accesses = await $rest.getCollection(`/api/${entity}`)
      repository.insert(accesses);
    }
  })
</script>

<style>
 @import "~/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>