app_vue2/components/List/ListComponent.vue

<template>
  <main>
    <ejs-grid :dataSource="data" :allowPaging="true" :pageSettings='pageSettings' :enableHeaderFocus="true">
      <e-columns>
        <slot></slot>
      </e-columns>
    </ejs-grid>
  </main>
</template>

<script lang="ts">
  import {defineComponent, ref, useFetch} from '@nuxtjs/composition-api'
  import { Page } from "@syncfusion/ej2-vue-grids";
  import {Query,Collection, Model} from "@vuex-orm/core";

  export default defineComponent({
    props: {
      query:{
        type: Object as () => Query,
        required: true
      }
    },
    setup({query}){
      const pageSettings = { pageSize: 30 }
      const data = ref([] as Collection<Model>)

      const { fetch, fetchState } = useFetch(async () => {
        const collection = await query.get();
        data.value = collection
      })

      return{
        pageSettings,
        data
      }
    },
    provide: {
      grid: [Page]
    }
  })
</script>

<style>
  .e-grid .e-gridheader {
    position: -webkit-sticky;
    position: sticky;
    top: 58px; /* The height of top nav menu. */
    z-index: 1;
  }
</style>