Как структурировать и систематизировать компоненты?
Если MainNav используется 1 раз в хедере, то почему не назвать это HeaderNav?
К чему я склоняюсь(и как мне кажется нас склоняет vue style guide):
- разделить основные страницы и сущности в них(компоненты)
- страницы класть в папку pages или layouts, компоненты класть в папку components
- при этом страницы могут содержать бизнес логику такую как запросы к API или работа со store, компоненты же должны быть максимально чистыми и реюзабельными(представьте что в  компонентах вы пишите общедуступную UI библиотеку)
- в пейджах не обязательно создавать никаких папок(хотя если это nuxt то ок), в компонентах же наоборот следует создать папки с теми сущностями которые мы выделили в п.1. Тоесть есть у нас есть сущность/секция хедер, на выходе мы имеем:
Header
---Header.vue
---HeaderNav.vue
---HeaderNavItem.vue
---HeaderAuth.vue
Попробуйте разделить компоненты по их сути:
1. Атомы\блоки - неделимые компоненты, части других компонентов с минимальным набором характеристик. Выполняют одну единственную задачу.
2. Контейнер - компоненты, которые появляются один раз на странице. Шапка, футер, навигация, это всё сюда. 
3. Самостоятельные компоненты - сгруппированные компоненты, отражающие суть задачи, которую они решают. 
В итоге структура может выглядеть так:
atoms
--button
--textInput 
container
--header
--footer
--mainNav
layout
--columns
--grid
--inline
overlays
--overlay
users
--userName
--userAvatar
--userItem
От БЭМ совсем отказываться не стоит, он сэкономит вам кучу времени когда нужно будет что-то поменять в компонентах через месяц и больше.