Pinia InternalError: too much recursion error when using q-list in Quasar

Question

I' stuck at this error InternalError: too much recursion when using a Pinia Store in my Quasar component, I've done everything I know about it nothing solved.
Can I get a advice here?

Here's my IndexPage.vue, where I call the QList component:

<template>
  <q-page>
      <div class="q-pa-md" style="max-width: 350px">
        <QList />
    </div>
  </q-page>
</template>

<script>
import QList from 'src/components/QList.vue';

export default {
  components: {
    QList
  }
}
</script>

Here's my QList.vue component:

<template>
    <div v-if="loading">Carregando...</div>
    <q-list v-else bordered separator>
        <q-item v-for="item in testData" :key="item.id" clickable v-ripple>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-list>
</template>

<script>
import { testeStore } from '../stores/teste'
import { defineComponent, computed, onMounted } from 'vue';

export default defineComponent({
    setup () {
        const store = testeStore();

        onMounted(() => {
            store.loadData();
        });

        const testData = computed(() => store.getData());
        const loading = computed(() => store.$state.loading);

        return {
            testData,
            loading
        }

    }
})
</script>

And my testeStore.js store:

import { defineStore } from 'pinia'
import testeData from '../assets/data/testes.json'

export const testeStore = defineStore({
  id: 'teste',
  state: () => ({
    data: [],
    loading: false,
  }),
  getters: {
    getData: state => state.data,
  },
  actions: {
    loadData () {
      try {
        this.loading = true
        this.data = testeData;
      } catch (error) {
        console.log(`Error fetching testes: ${{ error }}`)
      } finally {
        this.loading = false
      }
    }

  }
})

Every component is looking normal, I really don't know where is my problem. Here's a piece of vue warn from console:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 

Answer 1

Just checked the stackblitz and it looks like you're having a naming collision between your own QList component and Quasar's built-in 'q-list' component. Vue treats component names case-insensitively, which is why it's interpreting both 'q-list' and 'QList' as the same component.

To resolve this, you can either try renaming your own QList component to something else that doesn't clash with the Quasar component, such as 'MyQList', or import the Quasar 'q-list' component with an alias instead.

import { Qlist as QuasarList } from 'quasar'