Aetae

В vue 3 для реактивости юзаются Proxy, там set не нужен, просто присваивай и всё.)

Хуки Vue синхронные. Никто никого не ждёт. Не вызывайте getMediaUrls пока не будет данных.

Если вызов происходит в шаблоне - во-первых: не используйте методы в шаблонах без крайней необходимости: вместо метода getMediaUrls должно быть computed свойство mediaUrls; во-вторых: скрывайте в шаблоне отображение пока не появятся данные: v-if="currentProductData"/v-if="currentProductData.length" и показывайте вместо этого какой-нить loader, Vue не запросит то, что скрыто под v-if пока условие не станет верным.

...upd: посмотрел полный код. Незачем выносить getMediaUrls в mounted и разрывать асинхронную цепочку. Вызывайте его сразу в getProductData, либо если currentProductData может меняться в иных случаях - сделайте, опять же, computed свойством. В крайнем случае можно вызывать его, повесив watch на currentProductData, но computed лучше.

Проблема в том, что js в шаблонах Vue 2 - это не совсем js, а особый сабсет, обрабатываемый vue-loader'ом(посредством vue-template-compiler'а). Соответственно, никакой babel к нему не применяется, а писался он до того как придумали optional chaining. Как раз из-за таких подлянок в Vue 3 отказались от такого подхода(а за одно выкинули фильтры, собаки).

Быстрый поиск сразу выдал vue-nullable-loader - эта хрень на регулярках, а не на анализе AST, так что возможны глюки, но в целом должно работать.

P.S. Вообще странно, что никто не сделал этого как module для vue-template-compiler...

Vue тут не при чём, обычная легаси логика поведения формы:

<form>
  <input />
  <button onclick="alert('Такие дела')"></button>
</form>

Тянется ещё с тех времён, когда вэб - это было "не серьёзно", и браузеры считали, что думать за криворуких веб-мастеров и считать enter кликом - это всем на пользу.

Как-то так, ничего неожиданного:

<div class="row">
  <div class="input-field col s12">
    <select class="group-select" ref="select2" v-model="depart_select">
      <optgroup v-for="department in departments" :key="department.id" :label="department.NameOtdel">
        <option v-for="{NamePodrazdel, id} in department.NamePodrazdel" :key="id" :value="id">{{ NamePodrazdel }} </option>
      </optgroup>
    </select>
    <label>Структурное подразделение</label>
  </div>
</div>

И настучите по голове бэку который использует транслит и PascalCase в именах. (Если бэк тоже вы - настучите себе, ничего не поделать)

В ts структурная типизация. Такое может происходить если Snapshot структурно укладывается в тип Volume.

Т.е. вот так типы взаимозаменяемы:

interface Volume {
 id: number;
 volume?: string;
}

interface Snapshot {
 id: number;
 snapshot?: string;
}

А так нет:

interface Volume {
 id: number;
 volume: string;
}

interface Snapshot {
 id: number;
 snapshot: string;
}

И так нет:

interface Volume {
 id?: number;
}

interface Snapshot {
 id?: string;
}

1+2. Копмонент-обёртка, использующая метод с геттером-сеттером. Никакую логику переписывать не надо.)

Девсервер специально лочит на локалхост по умолчанию, чтоб ктонить не решил выставить его в интернет. Это можно поменять тут.

Передавать данные скрыто через route params - плохо (но возможно push({name: <name>, params: {...}})). Если кто-то откроет страничку напрямую - он ничего не увидит.
Каждая страничка должна уметь получить данные самостоятельно.

Решения два:
1. Забить и положиться на кэширование брузера: первую загрузку json он кэширует, вторую подцепит из памяти, задержка будет минимальна.
2. Вон у вас vuex подключён, кладите туда данные и показывайте данные оттуда. И только если денных там нет - загружайте их туда. Независимо от страницы.

Локальные стили - локальные, глобальные стили - глобальные. Vue не подключает туда-сюда файлы стилей по мере появления компонентов на странице - это было бы адски жирно и накладно по вычислениям. Стили просто есть: локальные(scoped) с префиксом, глобальные без. Стили динамических компонентов подгружаются один раз при первом обращении.

Соответственно, если надо динамически менять стили для bodyв зависимости от присутствия компонента на странице(я правильно понял?) - делай это руками: добавляй body класс на created, убирай на destroyed.

На сервере. Сервер должен адресовать все вызовы на index.html, чтоб уже там включился в работу vue-router. Как настроить для своего сервера гулуить "vue router <имя сервера>".

Вариант по-проще и по-ленивее: переключить роутер из режима history в hash. Ссылки, конечно, будут некрасивыми, но зато сразу заработает где угодно.

Вариант по-сложнее: настроить SSR.

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

Плохой ответ: самым очевидным образом: получить ref на ребёнка и в свою очередь забрать ref у него: this.$refs.child.$refs.childOfChild.
Возможно придётся также дождаться загрузки ребёнка, если он лежит в scoped слоте.

Если разные версии одних и тех же компонентов(различающихся только внутри но имеющих идентичный интерфейс), то можно просто использовать алиасы, типа:

alias: { 
  '@component-1': {
    'site1': path.resolve(__dirname, './site1/component-1.vue'),
    'site2': path.resolve(__dirname, './site2/component-1.vue'),
  }[process.env.TARGET]
}

import Component1 from '@component-1';
Это если не билдить лишнего. А так, если размер не критичен, можно просто использовать конфиг-файл и <component :is="var"/>.

Михаил всё правильно сказал. Чтоб вызывать функции из MixinName через точку, MixinName, очевидно, должен быть объектом. А объекты у нас кладутся в data, а не в methods.

У вас в вотчере стоит immediate: true, и, так как он задан на самом компоненте, вызван он будет сразу перед хуком created, когда vue-компонент уже создан но ещё не примонтирован. Соответственен никакого canvas на странице в этот момент нет.
Самое простое решение - добавлять вотчер не сразу, а в хуке mounted через this.$watch.