Как использовать разные компоненты в одном шаблоне vue?

Добрый день. Изучаю vue, делаю на нем учебное приложение. Сейчас структура App.vue такова:

<template>
	<div id="app">
		<board-view></board-view>
	</div>
</template>

<board-view></board-view> - по сути, крупный шаблон, внутри которого лежат два компонента помельче:

<template>
	<main class="main">
		<app-aside></app-aside>
		<app-section></app-section>
	</main>
</template>

Внутри <app-section></app-section> тоже есть разделение, на хэдер и основной контент:

<template>
	<section class="app__section">
		<section-header></section-header>
		<section-window></section-window>
	</section>
</template>

И внутри <section-window></section-window> сейчас расположено следующее:

<template>
	<section class="window">
		<div class="window__wrapper vuebar-element" v-bar>
			<div class="board">
				<add-button></add-button>
				<card-lists :task_list="getTasks"></card-lists>
			</div>
		</div>
	</section>
</template>

Все вышеизложенное - отдельные компоненты, в отдельных файлах.

Предполагается, что вместо <div class="board"></div> в компоненте section-window могут быть совершенно другие компонены. Равно как и в App.vue - может быть <board-view></board-view>, а может быть и какой-нибудь anything-else-view. Вопрос - как внутри таких, так сказать, сквозных шаблонов, использовать разные компоненты, в зависимости от того, какой роутинг задан? Или, может быть, подобный подход, в целом неправильный?