Структура выпадающего меню с компонентами

Question

У меня есть простой веб-сайт с использованием Bootstrap Vue, который содержит несколько страниц, скажем, страницы A, B и C

На домашней странице есть <b-navbar-nav> с <b-nav-item-dropdown> выбрать страницу A, B или C

MainMenu
|
|-A
|-B
|-C

Я хотел бы, чтобы на панели навигации появилось второе выпадающее меню, которое зависит от того, какую страницу вы выберете. Таким образом, Navbar выглядит так со страницы A

MainMenu     Page A
|            |
|-A          |-A1 
|-B          | A2
|-C          | A3

Тогда, если выбрана страница B

MainMenu     Page B
|            |
|-A          |-B1 
|-B          | B2
|-C          | B3

и т.д., довольно простые вещи

У меня есть компонент "main-menu.vue", который содержит первый раскрывающийся список (и стиль панели навигации), при условии, что у меня есть компонент "page-a-menu.vue" (во вложенной папке), как мне "внедрить" второй выпадающий в этот верхний компонент таким образом, чтобы я мог заменить "page-b-menu.vue", когда это необходимо? В идеале я бы тоже хотел третий уровень.

Какой самый простой и наиболее приемлемый способ сделать это?