app_vue2/components/Ui/SubList.vue

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

<script lang="ts">
  import {defineComponent, ref, useContext, useFetch, toRefs, onUnmounted} from '@nuxtjs/composition-api'
  import {Model, Query} from "@vuex-orm/core";
  import {queryHelper} from "~/services/store/query";
  import {QUERY_TYPE} from "~/types/enums";

  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 items = ref([] as Array<Model>)

      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
        })

        items.value = queryHelper.getCollection(query.value);
      })

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

      return {
        items
      }
    }
  })
</script>