Dynamic routing in Vue MPA

Question

I am building an MPA in Vue and I want to be able to have dynamic routes like "/domain.name/en/page" which could become "/domain.name/es/pagina" for example. I got it to work on my index page (for example "domain.name/en" and "domain.name/en/invite") but as soon as I go to another page (for example 'domain.name/en/about') everything falls apart.

I've tried editing my vue.config.js file to no success

vue.config.js before my changes

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  pages: {
    'index': {
      entry: './src/pages/Home/main.js',
    },
    'about': {
      entry: './src/pages/About/main.js'
    },
  }
}

In this configuration, my about page has the same url as my home page. When I go to "domain.name/about" I get the about page but the url is modified to "domain.name/en" and if I refresh I go to my home page. Going to "domain.name/en/about" returns the home page this time without changing the url.

vue.config.js after my changes

const { defineConfig } = require('@vue/cli-service')
module.exports = {
  pages: {
    'index': {
      entry: './src/pages/Home/main.js',
    },
    ':locale?/about': {
      entry: './src/pages/About/main.js'
    },
  }
}

With these changes, when I go to "domain.name/en/about" or "domain.name/about" I get the App.vue page of home instead of the about page.

Here are my routing files:

index.js for Home

import { createRouter, createWebHistory, RouterView } from "vue-router";
import HomeSub from "../views/HomeSub.vue";
import InviteSub from "../views/InviteSub.vue";
import Tr from "./../../../../translation.js";
const routes = [
  {
    path: "/:locale?",
    component: RouterView,
    beforeEnter: Tr.routeMiddleware,
    children: [
      {
        path: "",
        name: "home",
        component: HomeSub
      },
      {
        path: "invite",
        name: "invite",
        component: InviteSub
      }
    ]  
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
export default router;

index.js for About (with the modification to the vue.config.js file)

import { createRouter, createWebHistory, RouterView } from "vue-router";
import HomeSub from "../views/HomeSub.vue";
import Tr from "./../../../../translation.js";
const routes = [
  {
    path: "/:locale?/about",
    component: RouterView,
    beforeEnter: Tr.routeMiddleware,
    children: [
      {
        path: "",
        name: "about",
        component: HomeSub
      }
    ]
  }
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
export default router;

my routeMiddleware in the translation.js file

async routeMiddleware(to, _from, next) {
    const paramLocale = to.params.locale

    if(!Translation.isLocaleSupported(paramLocale)) {
      return next(Translation.chooseDefaultLocale())
    }

    await Translation.switchLanguage(paramLocale)

    return next()
  }

All the functions it calls work as intended (and because there are quite a lot of them I'm not going to put them all).

I hope you can help me figure out how to do this.