Aetae

Используй нормальный редактор с подсветкой синтаксиса. У тебя <a> не закрыты - из-за этого каждая следующая обвёрнута в предыдущую.

В firefox есть такая нестандартная фича как -moz-element, которая идеально подходит под задачу:
Увы, она никогда не станет стандартной, да и из ff её могут рано или поздно выпилить.

В остальном, решения, собственно, два:
1. Делать всю рабочую область на собственном canvas движке(можно попробовать что-то такое), и тогда просто получать копию холста на меньший canvas. Это более оптимально но требует переписывание всего и сложности основной работы.
2. Держать два идентичных компонента делящих одно состояние(на пример через внешний Vue.observable\reactive или vuex), один из которых уменьшать с помощью transform: scale().

html2canvas, предложенный выше, имеет очень ограниченную область применения и вряд ли тут сработает, но можете попробовать

P.S. Есть ещё один вариант: на любое обновление(тут поймать обновление в зависимости от вашей архитектуры может быть либо очень просто, либо очень сложно) делать верхнему компоненту тупо this.$el.cloneNode(true) и класть полученную копию в нужное место с тем же transform: scale(), но это может весьма сильно тормозить в зависимости от количества элементов и частоты обновления.

Всё работает, ищи ошибку в другом месте:

Как: через жопу.
С помощью чего: с помощью React.

Подгрузка компонентов не зависит от vue-router'a, а зависит от того как ты их подключаешь.

components: {
  some: () => import('@/components/some.vue')
}

или

Vue.component('some', () => import('@/components/some.vue'));

И компонент some будет загружен только тогда, когда потребуется.

Ну и цельный бандл - он кешируется, при перезагрузках страниц ничего больше заново не грузится. С точки зрения отзывчивости интерфейса как раз выгоднее когда всё загружается сразу, а потом лежит в кэше. Разбивать стоит если бандл слишком разжирнел и первоначальная загрузка сказывается на UX и\или если в приложении множество кусков которые могут быть в принципе не использованы в тех или иных поведенческих сценариях.

Просто:

let routes = await axios(...)
.then((response: AxiosResponse<Route[]>) => response.data)
.catch(console.log);

Нет смысла гонять из пустого в порожнее.

Только учитывай - все проверки типов и моделей typescript делает на этапе компиляции. На этапе исполнения никакого typescript не существует, потому когда приходит ответ с сервера нет никаких гарантий что он соответствует модели, и typescript не сможет никак отловить если это не так. Если нужны какие-то проверки - их надо писать самому руками или с помощью соответствующих либ.

Мужик, если ты используешь vue-cli, то рандомные файлы которые ты просто куда-то кинул не появятся магическим образом во встроенном сервере. Для публично доступных файлов предназначена папка public.
Однако, встроенный сервер vue-cli не умеет и не должен уметь исполнять php, это совершенно из другой оперы языки и технологии.
Для разработки тебе надо поднять отдельный php сервер на отдельном порту и через vue devserver proxy пробросить на него подобные запросы.
Для прода - тебе надо настроить прод сервер по вкусу.

requests[id]
Изучи базоый javascript перед тем как лезть в vue.

Возможность встроиться куда угодно - это одна из фич Vue, так что с т.з. Vue это абсолютно нормально. Другое дело, что таков винегрет не слишком красив.

Подозреваю # в пути лишний.

Про паттерны-фигаторны ничего не скажу, а вот то что метод начинающийся на validate не должен ничего никуда писать - это факт.)

Нативными средствами - нет. title приоритетнее чем alt.
Просто удали title. Ну или добавь скрипт, который это будет делать за тебя.

Какая нафиг отправка статистики в computed? computed не должен иметь сайдэффектов, только отдавать значение.

Нужно больше кода, из текста не понятно, что у тебя там происходит.

Если же просто описать как работает computed: при первом обращении к нему производится первое вычисление, а также, условно, вешается watch на все реактивные свойства, к которым внутри него было обращение. Соответственно перевычисление computed происходит исключительно если одно из этих свойств поменялось.

P.S. При SSR computed на стороне сервера вообще не кэшируется вроде, т.е. перевычисляется при каждом обращении. Инфа не 100%.)

Перейдя на реакт вы будете страдать. Реакт - это тупо даунгрейд. Всё то же самое, но хуже и местами отсутствует. Есть ли в нём хоть какие-то преимущества перед vue? Не знаю таких.
Что за проблемы у вас с библиотеками?

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

Если очень хочется, то в created вешаешь обработчик на resize(а лучше mediaQuery addListener\onchange раз у тебя есть конкретный берйкпоинт), на destroyed обязательно снимаешь обработчик. Сам обработчик ставит какую-то переменную в data.

Вместо кучи компонентов с if, используй один <component :is="conponent" v-bind="allprops"/>.