Aetae

require не "берёт картинки из папки", require обрабатывает картинки loader'om и выдаёт в ответ результат. Статический результат, который попадает в бандл.
require(`./img/${name}.png`);- не значит "взять картинку по имени name из папки img во время исполнения", это значит "во время компиляции взять все картинки с маской './img/*.png', обработать loader'ом, получить для каждой статическую ссылку, и положить в бандл".
loader'ы по умолчанию превращают маленькие картинки в data:uri строки, а большие перекладывают в папочку imgs и переименовывают с хэшем, возвращая путь. Но это по-умолчанию, а так они способны много всякой магии творить.

Суть: новые картинки ты, которых не было во время сборки, таким образом не подцепишь.
Но это и не нужно, картинки лежащие в папке public копируются в результирующую папку как есть и доступны по /name.png без require, просто через обычный html и css.

1. computed не будет пересчитаться при обновлении ref'ов или dom-значений. Он работает с реактивными данными.
2. Рефы доступны только после загрузки соответствующих элементов(очевидно), а вы, судя по всему, обращаетесь к ним раньше.

Итого: уберите этот код из computed и поместите в mounted, вручную присваивая значения переменной в data. Не забудьте добавить значения по умолчанию, а также обновлять их при необходимости(по событию resize или ещё какому, способныму повлиять на эти размеры).

P.S. В большинстве случаев то, что вы пытаетесь решить подобным кодом делается на css.

Всё просто - опциональный параметр: /catalog/:slug/:option?.
Если нужно много всякой фигни накрутить, то можно и вообще regexp: /catalog/:slug/(.*)? и ловить любые пути.

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

Без ларавел - можно и нужно, только на vue(или чем ещё клиентском) - нельзя.
Вообще, паря, с твоим пониманием сетевых технологий вообще трогать деньги нельзя. Серьёзно, если ты даже клиент от сервера не отличаешь - перепоручи лучше профессионалам.

Всё работает:
Подозреваю что-то у вас с настройкой реврайта сервера.

Хуки 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 в именах. (Если бэк тоже вы - настучите себе, ничего не поделать)

<template functional>
  <component :is="props.name"/>
</template>

=)

В 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. Копмонент-обёртка, использующая метод с геттером-сеттером. Никакую логику переписывать не надо.)

async savePost(){
  this.iconStatus = 'loading';
  const ides = {post_id: this.content.id, user_id: this.GET_USER.id};
  const result = await this.$store.dispatch('saveOrDelete', ides).catch(() => ({message: 'error'}));
  this.iconStatus = result.message;
}

?

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

Передавать данные скрыто через 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"/>.