locale.vue

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Locale',
  });
</script>

<template>
  <router-view />
</template>

Routes.ts

router.beforeEach(async (to, from, next) => {
  const localeInParams = getLocaleFromParams(to.params); //DIY
  const isNewLocale =
    localeInParams !== undefined && localeInParams !== currentLocale;
  if (isNewLocale) {
    const isNewLocaleSupported = SUPPORT_LOCALES.includes(localeInParams);
    if (!isNewLocaleSupported) {
      return next(redirectToFallbackLocale(currentLocale, to.fullPath));
    }
    await localeMessageChange(i18n, localeInParams);
  }
  next(true);
}

RoutesRecords.ts

{
    path: '/:locale?',
    component: () => import(/* webpackPrefetch: true */ '@views/locale.vue'),
    children: [
      {
        path: '',
        name: 'HOME',
        component: () => import(/* webpackPrefetch: true */ '@views/home.vue'),
      },
}