Vue Router: Automatically being redirected to root path of router upon page refresh

I have a problem in my Vue app where the router automatically redirects itself to the root of the current path. Say, I am on the path localhost:5000/new/123456 and when I refresh the page, I am redirected to localhost:5000/new/. This happens for all routes. I have another route on /active/ that is being redirected to if I refresh on /active/123456.

The code does reach the component's lifecycle methods (e.g mounted()) of the correct path, but the redirection occurs instantly after.

Router:

const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes : [
        {
            path: '/new/:itemId/',
            component: ServiceDetail,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/new/',
            component: ServiceOverviewNew,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/active/:itemId/checklist',
            component: CompleteServiceQuestionnaire,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/active/:itemId/',
            component: ServiceDetail,
            meta: {
                layout: 'Default'
            }
        },
        {
            path: '/active/',
            component: ServiceOverviewActive,
            meta: {
                layout: 'Default'
            }
        }
    ]
});

I run a beforeEach to correctly set the layout component according to the routes layout property. If it may ever be relevant, this is the code for that:

router.beforeEach(async function (route) {
    const layoutComponent = await import(`./layouts/${route.meta.layout}.js`);
    route.meta.layout = layoutComponent.default;
});

Edit: I am running Vue in a .NET Core project using static files. I am unsure, but it may be relevant to the issue. Here is the code in my Startup.cs Configure method:

DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
defaultFilesOptions.DefaultFileNames.Clear();
defaultFilesOptions.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(defaultFilesOptions);

RewriteOptions options = new RewriteOptions()
    .AddRewrite(@"^new/$", "index.html", true)
    .AddRewrite(@"^new/(\d+)/$", "index.html", true)
    .AddRewrite(@"^active/$", "index.html", true)
    .AddRewrite(@"^active/(\d+)/$", "index.html", true)
    .AddRewrite(@"^active/(\d+)/checklist/$", "index.html", true);
app.UseRewriter(options);

//Adding Static Files Middleware to serve the static files
app.UseStaticFiles();

I managed to find the solution! It appears that a watcher property, called selectedList, that was bound to navigation buttons on the bottom of my app was causing the issue.

When the component was loaded through the mounted method, the app would set the value of selectedList to another value. This would trigger the handler in the watcher of the property, pushing a URL to the router, and thus navigating it to a different URL.