Why does export const work but export function does not?

Question

I am trying to ensure that the same instance of vue-router is available in multiple places in my app.

The vue.router.js file exports the router like this:

export function createVueRouter() {
    return createRouter({
        history: createWebHistory('/')
        routes: [//array of routes]
    });
}

In my main app.js file (or main.js if you prefer) it is used like this:

import {createVueRouter} from './router/vue/vue.router.js';
const router = createVueRouter();
app.use(router);

The Vue app now has access to the vue-router. I now want the same vue-router to be available in an independent JS file. But the following does not work:

resusable.js

import {createVueRouter} from './router/vue/vue.router.js';
const router = createVueRouter();
//....
if (isLoggedInBasic !== true) {
            return await router.push({name: "Signin"})
}

It creates a new instance of the vue-router and the router.push does not take the user to the Signin route (but the URL in the address bar does change).

If I change vue.router.js export to the following, it works fine all the files with the same router instance being shared between them.

export const VueRouter = createRouter({
    history: createWebHistory('/')
    routes: [//array of routes]
}) 

I cannot understand what is the difference and why it works when export const is used rather than just export function ()