Why doesn't the named router-view work?

Question

Vue.js

I want to make filling out the form in several steps
Now the checkout form works with the help of route navigation (forward / back buttons)
there is a root component in the template of which the child component is rendered

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

when navigating, one component is rendered,
I want to change the logic of the form
to display all Named Views in the template
and render the necessary one, depending on the route,
something like that

<template>
    <div>
        <router-view></router-view>
        <router-view name="BookBase"></router-view>
        <router-view name="FromAirport"></router-view>
    </div>
</template>

but in this format nothing is rendered and it doesn’t give errors, I can’t understand what the joke is - according to the docks, this should work
just in case, I throw off the router and the component code

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import BookMain from '../Components/BookMain'
import BookBase from "../Components/BookBase";
import FromAddress from "../Components/FromAddress";
import FromAirport from "../Components/FromAirport";
import PersonalInfo from '../Components/PersonalInfo';
import TotalBook from '../Components/TotalBook';
import BookToDb from '../Components/payment/BookToDb'
import PayByCard from '../Components/payment/PayByCard';
import PayByCash from '../Components/payment/PayByCash';
import YandexKassa from '../Components/payment/YandexKassa';
import FailPayment from '../Components/payment/FailPayment';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: {name: 'BookBase'},
        name: 'bookMain',
        component: BookMain
    },
    {
        path: '/base',
        name: 'BookBase',
        components: {
            default: BookBase
        }
    },
    {
        path: '/address',
        name: 'FromAddress',
        component: FromAddress,
    },
    {
        path: '/airport',
        name: 'FromAirport',
        component: FromAirport,
    },
    {
        path: '/personal',
        name: 'PersonalInfo',
        component: PersonalInfo
    },
    {
        path: '/total',
        name: 'TotalBook',
        component: TotalBook
    },
    {
        path: '/book-to-db',
        name: 'BookToDb',
        props: {redirectTo: true},
        component: BookToDb
    },
    {
        path: '/pay-by-card',
        name: 'PayByCard',
        component: PayByCard
    },
    {
        path: '/pay-by-cash',
        name: 'PayByCash',
        component: PayByCash
    },
    {
        path: '/yandex-kassa',
        name: 'YandexKassa',
        component: YandexKassa
    },
    {
        path: '/fail-payment',
        name: 'FailPayment',
        component: FailPayment
    },

];

const router = new VueRouter({  routes });
export default  router;

Answer 1

1. Please complete the code properly.
2. Read this and compare with what you have written.