I have created this page with Vue 3 + Vuetify called demo.vue in my project which receives data from an API server.

The problem that I’m facing is that I setup the data inside an onMounted function, and once everything is loaded, data is not available in table.

The most curious thing is that If I use await demo() outside an onMounted function, data loads perfectly on the table. So I don’t really get the point how onMounted really works. It’s supposed to load the data once the component is mounted.

Data comes perfectly.
Data object OK
Error comes as NULL
Loading comes as False

Using onMounted

Not using onMounted

What is wrong?

<script setup>
    import { ref, onMounted } from 'vue'
    import DataTableComponent from '@/components/DataTableComponent'
    import useFetch from '@/hooks/useFetch'
    import buildUrl from '@/utils/urlBuilder'

    // Reactive variables
    const dataTableHeaders = ref([])
    const dataTableItems = ref([])
    const dataTableTotalItems = ref(0)
    const dataTableLoading = ref(true)

    // Methods
    let dataTableUpdate = () => {}

    const demo = async () => {
        const url = buildUrl('fieldeas_tracktrace_pre', 'test')
        const { data, error, loading, refresh } = await useFetch(url)

        console.log("buildUrl", url)
        console.log("useFetch", data, error, loading, refresh)

        if (data && data.fields && data.rows && data.rowCount) {
        dataTableHeaders.value = data.fields
        dataTableItems.value = data.rows
        dataTableTotalItems.value = data.rowCount
        }

        dataTableLoading.value = loading
        dataTableUpdate = refresh
    }

    // await demo()

    onMounted(async () => {
        console.log("entro onMounted")
        await demo()
    })
    </script>

    <template>
    <v-container>
        <DataTableComponent
        :headers="dataTableHeaders"
        :items="dataTableItems"
        :totalItems="dataTableTotalItems"
        :loading="dataTableLoading"
        :update="dataTableUpdate"
        ></DataTableComponent>
    </v-container>
</template>