Алексей Ярков

Правильный вариант - либо цепочка $emit и их обработчиков (можно через event bus), либо переход на vuex и их action. Неправильный - использование $root.method.

хранить не в контейнере

https://docs.docker.com/storage/volumes/

Каким образом можно реализовать vk-подобную маршрутизацию?
То есть site.ru/id*** = компонент Profile, site.ru/group*** = компонент Group

new Router({
  // ...
  routes: [
    {
      path: '/(id):id',
      name: 'Profile',
      component: Profile,
    },
    {
      path: '/(group):groupId',
      name: 'Group',
      component: Group,
    },
  ],
});

а главная страница меняется в зависимости от того, авторизован ли пользователь. То есть, если авторизован, то site.ru = Dashboard, а если нет, то Landing.

// Home.vue
<Dashboard v-if="isAuth" />
<Landing v-else />

Вам нужен линтер для html. Это легко гуглится. Можно воспользоваться так же валидатором w3c

ps: Если ВНУТРИ div изменить код нельзя, а b является последним дочерним элементом можно закрыть b поcле div.

Если таких блоков div много, подряд - можно для тега p отметить свойства css, которые вы задаете для b, а закрыть тег после последнего div

Работать будет, но это невалидно.

В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

Это какую такую логику? У вас там в created будет простой вызов экшена, это одна строка. Уместно, делайте.

UPD. Вынесено из комментариев:

Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?

Можете в своём main.js завернуть создание экземпляра vue в коллбек экшена, который загружает данные:

store.dispatch('получитьДанные').then(() => {
  new Vue({
    el: '#app',
    store,
    router,
    ...

Только пользователь ничего не увидит в процессе загрузки. А если инициировать загрузку данных внутри, можно показывать какой-нибудь прелоадер, пока данные не будут получены:

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>

Потому что нечего находить - ваш шаблон не существует в DOM-дереве (при сборке компилируется в render-функцию); искать элементы вы пытаетесь в хуке created, это слишком рано, создание экземпляра vue и его монтирование происходит не единовременно - используйте хук mounted.

<div v-bind:style="{backround: `url('${getPhoto()}')`}"></div>

Работа с классами и стилями

Можно.

Только разберитесь, что это за штука такая, Object.assign, что делает. А то вы явно чего-то не до конца понимаете, судя по показанному коду. Ну и имейте в виду, что если какое-то из свойств payload отсутствует в стейте, то после добавления оно не будет реактивным.

Object.assign мутирует первый аргумент, поэтому присваивание не требуется

SET_USER(state, payload = {}) {
  Object.assign(state, payload)
}

props: {
  siteWide: {
    type: Boolean,
    default: false,
  }
},
computed: {
  siteWidePath() {
    return this.siteWide ? ';path=/' : '';
  }
}

Что-то вроде такого:

function test(value) { return value / 1000000; }

Это не кнопка, а ссылка. У нее нет атрибута disable
из-за неправильно выбранного тега вытекает куча головной боли https://css-tricks.com/how-to-disable-links/

В современном мире - сертификаты имеют околонулевую значимость. И могут сыграть порой злую шутку, если сертификат есть, а знаний по нему нет, после пары вопросов с вами перестанут разговаривать.

Вотчеры - это обычно признак джейквири-программирования =)
Лучше сохранять оригинальные данные и их сравнивать с текущими. Так и честный changed будет (у вас скорее "touched").

Вот набросал примерно:

const api = {
  async getData() {
    return {name: 'Foo', email: 'foo@bar.com'};
  }
}

new Vue({
  el:'#app',
  template: `<div v-if="current">
    <input v-model="current.name" />
    <input v-model="current.email" />
    <button :disabled="!isChanged">submit</button>
  </div>`,
  data() {
    return {
      original: null,
      current: null,
    }
  },
  async created() {
    const data = await api.getData();
    this.original = JSON.stringify(data);
    this.current = data;
  },
  computed: {
    isChanged() {
      return JSON.stringify(this.current) !== this.original;
    }
  }
});

https://codepen.io/dubrowsky/pen/BvdKZE?editors=1010

UPD: Если нужен не changed, а touched - сделайте

<input type="text" v-model="name" @input="name_changed = true">

и будет счастие

проблема в том, что видимо когда по первому запросу поле name заполняется, соответственно поле name_changed становится равно true и кнопка сохранения получается изначально доступна

Можно запускать слежение после получения данных. Вырезаете

watch:{
  name(val, old){
    this.name_changed = true;
  }
}

А в коллбек запроса, после установки значения name, добавляете:

this.$watch('name', () => this.name_changed = true);

performance.now() возвращает количество миллисекунд, прошедшее с начала загрузки страницы