Vue router taking me to parent route mistakenly

It seems there are conflicts on your root routes (every path with "/" in front). You could check the vue-router documentation for nested routes Vue Nested Routes

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: () => import('AccountList.vue'),
        alias: '/account'
    },
    {
        path: '/account-creation',
        component: () => import('AccountCreation.vue')
    },
    {
        path: '/account/:accountId',
        component: () => import('AccountDetailsLayout.vue'),
        children: [
            {
                path: 'overview',
                component: () => import('AccountOverview.vue')
            },
            {
                path: 'settings',
                component: () => import('AccountSettings.vue')
            }

    }
]

Something like this could work, but as you pointed out the redirect on "/" is a code smell since you load different components.
The MainLayout component will never be mounted with this code, instead you will be redirected to AccountList.

EDIT

I edited the original answer based on Excalibaard's comment. You probably should add <router-view> in your MainLayout.vue

P.S. /account path should be accounts as it renders a list

If you are passing id to the route correctly, then the issue would be that You have to have a child router-view tag in your AccountDetailsLayout.vue in order to display this route with url account/{id}/overview . Since this is the grandchild of the main layout.Just put the router-view tag in your file like this.

AccountDetailsLayout.vue
-----------------------

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

<script>

export default {
    name: "AccountDetailsLayout",
    components: {},
    store,
    data() {
        return {};
    },
    computed: {},
    mounted() {},
    methods: {}
};
</script>

<style scoped></style>