If I useCustomFetch on onMounted and I reload the page, the error ‘Hydration completed but contains mismatches.’ appear. But, if I was redirect to the page, the useCustomFetch works correctly without error.

// useCustomFetch.ts
import { useFetch } from '#app';

export async function useCustomFetch(url: string, options: any, showLoading: boolean = false) {
    if (!process.server) {
        console.log("Not Server side called APIs");
    }
    console.log("called APIs");

    if (typeof window === 'undefined') return;

    console.log("Start APIs");

    try {
        const { data, error } = await useFetch(url, options);

        if (showLoading) {
            console.log("Showing loading...");
        }

        if (showLoading) {
            console.log("Closing loading...");
        }

        const response = data.value;
        const responseError = error.value;

        if (responseError) {
            console.error("Fetch error: ", responseError);
            return null;
        }

        return response;
    } catch (err) {
        console.error("Error in useCustomFetch:", err);
        throw err;
    }
}

And this is the print out from the browser:

browser.mjs:44  Not Server side called APIs
browser.mjs:44  called APIs
browser.mjs:44  Start APIs
browser.mjs:44  error Hydration completed but contains mismatches.
    log @ browser.mjs:44
    _log @ core.mjs:381
    resolveLog @ core.mjs:349
    _logFn @ core.mjs:377
    (anonymous) @ core.mjs:306
    hydrate2 @ runtime-core.esm-bundler.js:4641
    mount @ runtime-core.esm-bundler.js:3919
    app.mount @ runtime-dom.esm-bundler.js:1530
    initApp @ entry.js:56
    await in initApp (async)
    (anonymous) @ entry.js:67
    Show 5 more frames
    Show less
browser.mjs:44  Showing loading...
browser.mjs:44  Closing loading...

This is the page i useCustomFetch, and i already ensure it is called on client-side.

// some page/xxx.vue

const getInventoryData = async () => {
    try {
        inventoryData.value = await useCustomFetch('/api/inventory/', {
            method: 'GET',
        }, true);
    } catch (err: any) {
        error.value = err;
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    getInventoryData();
});

Why i need to use custom fetch is i want to have loading popup and other notification during the APIs calls and APIs result. Otherwise I need to copy and paste all the setting on each single useFetch.