app_vue2/pages/parameters/education/index.vue

<template>
  <LayoutContainer class="mt-4">
        <v-expansion-panels  focusable multiple :value="[0]">
          <!-- Description -->
          <UiExpansionPanel id="cycle" icon="fa-bars">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                  <UiCollection
                    :query="query()"
                    :model="model"
                    loaderType="image"
                  >
                    <template #list.item="{items}">
                      <v-container fluid>
                        <v-row dense>
                          <v-col
                            v-for="item in items"
                            :key="item.id"
                            cols="4"
                          >
                            <UiCard
                              :id="item.id"
                              :link="`/parameters/education/cycle/${item.id}`"
                              :model="model"
                              :can-delete="false"
                            >
                              <template #card.text>
                                {{ item.label }}
                              </template>
                            </UiCard>
                          </v-col>
                        </v-row>
                      </v-container>
                    </template>
                  </UiCollection>
                </v-col>
              </v-row>
            </v-container>
          </UiExpansionPanel>

        </v-expansion-panels>
  </LayoutContainer>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent} from '@nuxtjs/composition-api'
import { repositoryHelper } from '~/services/store/repository'
import {Query} from "@vuex-orm/core";
import {Cycle} from "~/models/Education/Cycle";

export default defineComponent({
  name: 'cycles',
  setup () {
    const repository = repositoryHelper.getRepository(Cycle)
    const query: ComputedRef<Query> = computed(() => repository.query().orderBy('order', 'asc'))

    return {
      query: () => query,
      model: Cycle
    }
  }
})
</script>