I'm using Nuxt with Nitro's WebSocketAPI

Unfortunately useState can't store data that can't be serialized as said there : ...anything that cannot be serialized, such as classes, functions or symbols.

I already tried using a /composable/sharedSocket.ts but it throws warning when i try to watch the composable's returned values such as status ref, suggesting that the reactivity may be broken :

import type { UseWebSocketReturn } from "@vueuse/core";

export const useSharedSocket = (url: string) => {
    const sharedSocket = ref<UseWebSocketReturn<any>>();

    if (!sharedSocket.value) {
        sharedSocket.value = useWebSocket(url, { heartbeat: true });
    }

    return sharedSocket.value;
};

I have already thought about opening/closing connection for each page
So my question, is there a way to share a single websocket connection through layout/pages ?