Активное сокет соединение SignalR на страницах VUE SPA

У меня есть spa приложение на vue3 с использованием vue-router. Настроен signalR сокет в отдельном файле websocket.js. Изначально я попадаю на /login, где после авторизации получаю token, который установится в socket.header. Но в итоге соединение устанавливается только на странице login, а на других страницах (компонентах) при импорте этого socket я вижу в дебаге, что он disconnected.

Но: после перезагрузки страницы c F5, все работает, как я планировал. Подскажите, пожалуйста, могу ли я как-нибудь избежать этой перезагрузки и после авторизации, перейдя через router.push('/lists'), попасть на роут /lists с активным сокет соединением?

    // websocket.js
const socket = new HubConnectionBuilder()
.withUrl(state.socket_addr, {headers: {'Authorization': state.token} })
.build()

async function start() {
    socket.headers = {'Authorization': state.token}
    console.log(socket.headers)
    try {
        await socket.start();
        console.log("SignalR Connected.");
    } catch (err) {
        console.log(err);
        setTimeout(start, 5000);
    }
}
start()
export default socket
...
...
...
    // gloabal.js
const state = reactive(
    {
        isAuthenticated: localStorage.getItem('user_token'), 
        token: 'Bearer '+ localStorage.getItem('user_token') 
})
export default state```


console.log(socket.headers) показывает измененный, правильный, header. Значит проблема не с globals, не с заданием headers, а с чем-то другим...
Код для сокета взят сайта разработчика библиотеки
<https://learn.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-7.0&tabs=visual-studio>