app_vue2/components/Ui/SubList.vue

<template>
    <main>
      <v-skeleton-loader
        type="text"
        v-if="loading"
      ></v-skeleton-loader>
      <div v-else>
        <slot name="list.item" v-bind="{entries}"></slot>
      </div>
      <slot>
      </slot>
    </main>
</template>

<script lang="ts">
  import {defineComponent, ref, useContext, useFetch, computed, toRefs, onUnmounted} from '@nuxtjs/composition-api'
  import {Query} from "@vuex-orm/core";
  import {AnyJson} from "~/types/interfaces";
  import {useQueryHelper} from "~/use/store/useQuery";
  import {QUERY_TYPE} from "~/types/enums";
  import {Organization} from "~/models/Organization/Organization";

  export default defineComponent({
    props: {
      rootModel:{
        type: Function,
        required: true
      },
      rootId:{
        type: Number,
        required: true
      },
      model:{
        type: Function,
        required: true
      },
      query:{
        type: Object as () => Query,
        required: true
      }
    },
    setup(props) {
      const {rootModel, rootId, model, query} = toRefs(props);
      const entries = ref([] as Array<AnyJson>)
      const loading = ref(true)

      const {$dataProvider} = useContext()
      const {fetch, fetchState} = useFetch(async ()=>{

        await $dataProvider.invoke({
          type: QUERY_TYPE.MODEL,
          model: model.value,
          root_model: rootModel.value,
          root_id: rootId.value
        })

        entries.value = useQueryHelper.getEntries(query.value);
        loading.value = false
      })

      // onUnmounted( useRepositoryHelper.cleanRepository(repository.value) )

      return {
        entries,
        loading
      }
    }
  })
</script>