app_vue2/pages/parameters/billing/index.vue

<template>
  <LayoutContainer class="mt-4">
        <v-expansion-panels  focusable multiple :value="[0]">
          <!-- Billing -->
          <UiExpansionPanel id="residenceArea" icon="fa-globe-europe">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                  <UiCollection
                    :query="query()"
                    :model="model"
                    loaderType="image"
                    newLink="/parameters/billing/residence_area/new"
                  >
                    <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/billing/residence_area/${item.id}`"
                              :model="model"
                            >
                              <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 {ResidenceArea} from "~/models/Billing/ResidenceArea";

export default defineComponent({
  name: 'residence-areas',
  setup () {
    const repository = repositoryHelper.getRepository(ResidenceArea)
    const query: ComputedRef<Query> = computed(() => repository.query())

    /** todo Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
    return {
      query: () => query,
      model: ResidenceArea
    }
  }
})
</script>