Evgeny Kulakov

Можно делать так - создается базовый лэйаут хидера - компонент, который как правило не содержит логики, но задает внешнее оформление и набор слотов, через которые в него будут передаваться компоненты.
Далее создаете кастомные компоненты на базе этого лэйаута типа registration-header, user-header и т.д. и добавляете в слоты компоненты, отвечающие за данный конкретный вариант хидера.

По поводу создания собственной темы - можно сделать какой-то базовый компонент, от которого будут наследоваться аттрибуты, отвечающие за тему. На базе этого аттрибута будет в конкретном компоненте будет использоваться соответствующий класс. Например, в компоненте выпишите так:

<template>
<div :class="`header-${themeName}`">
</div>
</template>
<style>
.header-dark{
...
}
.header-light{
...
}
</style>

Можете посмотреть исходники библиотеки типа vuetify - как там реализуется поддержка темы.

Зависит от того, какую цель вы преследуете - изучить что-то новое посредством этого проекта или сделать его в кратчайшие сроки. Если сроки важнее - выбирайте то, что лучше знаете. Vue - просто библиотека для построения интерфейса и выбор бэкенда не имеет смысла к ней привязывать.

Почему бы просто не передать этот $refs.element в пропсы дочернего компонента.

Очевидно, что есть как минимум два варианта:

1. передавать уже готовый список, чтобы рендеринг происходил сразу с уже имеющимися данными
2. забирать данные в компоненте, но не показывать его до тех пор пока, они не получены. Т.е. внутри модального окна на корневой элемент поставить v-show="active" например, active = true - когда вы получили данные.

Возможно экшн еще не отработал. Сделайте вот так для проверки:

store.dispatch('getUser').then(() => {
new Vue({
    el: '#app',
    router: router,
    components:{
        'head-app':headImplant,
        'footer-app':footer,
        'sidebar-app': sidebar
    }
})
})

У вас должен быть компонент вида:

<!-- index.vue -->
<div>
  <header/>
  <menu/>
  <content>
    <router-view></router-view>
  </content>
<footer/>
</div>

Соответственно при навигации будет отображаться заданный компонент.
Роуты должны примерно так выглядеть:

{
  path: '/',
  component: index,
  children: [
    { 
      path: 'dashboard',
      component: dashboard
    },
    { 
       // other route
    }
  ]
}

Мало данных, но вот это: :patient_id="{{ patient.id }}" должно вот так выглядеть: :patient_id="patient.id"

Вот в каком шаблоне компонента у вас вот это: <component v-bind:is="move"></component>
Туда и добавить функцию move и скобки не забыть поставить, чтобы ее вызов произошел: <component v-bind:is="move()"></component>

Это можно сделать через webpack и плагин sass-resource-loader. Передать в него файл с переменными, в итоге они будут доступны везде.