Aetae

Vue 2 не даёт использовать произвольный код в шаблонах, там код компилируется вместе с самим шаблоном отдельно от всей твоей системы сборки.

В теории можно подсунуть свои обработчики в компилятор, но на практике когда до этого дошло и я начал рыть в эту сторону - появился vue 3 и я забил. Можешь порыть и забить и ты.:)

В любом случае тайпкасты в шаблоне - моветон, пофикси изначальные типы и всё будет нормально. Ну или по-хардокору можно отрубить тайпчек в шаблонах в IDE.:)

Использование методов\функций в шаблоне - тоже весьма плохо, и так делать крайне на рекомендуется: подготовь все данные в compunted и отдавай в шаблон только чистые и удобные для него(шаблона) данные.
Если это сделать кажется сложно, то с большой вероятностью вы неправильно используете vue: в vue надо разбивать всё на минимальные компоненты(пусть даже в пяток строк), вот и тут разбейте на подкомпоненты и всё снова станет просто и приятно.

А на богомерзкий jsx не переходи, а то те, кто после тебя проект продолжит, могут тебе и глаз подбить.:)

React Native - нет, он без сборки не заведётся.
React - да, но придётся выкинуть 90% уроков из сети на помойку, так как писать придётся не на jsx, а на прямом использовании api, т.е. React.cteateElement(Component, ...) вместо <Component ...>. Про 60% библиотек и вспомогательных утилит тоже можно будет забыть, с ещё 20% придётся хорошенько повозиться чтоб запустить.

В целом же заниматься фронтом без ноды и обвеса в наше время - для сильных духом.:)

Ну теперь у тебя websocket зависит от http, что противоречит условиям задачи.:)
В том смысле, что слив websocket в реальный dev, ты сольёшь и http(до того коммита, на котором ты и произвёл сии манипуляции).

Если ветки таки должны быть независимыми, то придётся дублировать код. В идеале черри-пикать только нужное из http в свой websocket, тогда в дальнейшем мороки с слиянием будет меньше. Если коммиты в http содержат слишком много лишнего, то тут придётся уже прямо копировать.

Как ты используешь этот RegisterService?
Чтоб он работал, как и написано в ошибке, он должен быть компонентом.
Т.е. <RegisterService ...> или React.createElement(RegisterService, ...) .

Второй вариант: он может быть не компонентом, а хуком. Тогда он должен вызываться внутри другого компонента, а также иметь префикс use - useRegisterService(отсутствие префикса не приведёт к ошибке, но это стандарт).

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

Это называется PWA(progressive web app).
Как сделать - гугли отдельно, нормальный ответ не влезет в рамки вопросника.

Можно с помощью getCurrentInstance, но не нужно(прочтите предупреждение по ссылке).
Лучше расскажите зачем оно вам надо, а мы предложим лучшее решение. :)

Ты можешь использовать css переменные.

Во-первых: вопрос не относится к vue, он о чистом js.
Во-вторых: код рабочий, просто у вас, судя по всему, отсутствуют такие item, где одновременно были бы равны item.product.article, item.size и item.warehouse.id, т.к. только в таком случае ветка уйдёт в нужную вам сторону. Если логика предполагалась какой-то другой - уточняйте.
Во-третьих: используйте, по возможности, для отдельно стоящих объектов reactive вместо ref, код чище и приятней будет.

Неплохо бы, чтоб в следующих своих вопросах ты прикладывал собственно КОД и тест ошибки.
Я смог выковырять причину из собранного бандла, но тебе просто повезло, куда чаще мне(и 99% людей) так делать лень.

Теперь, собственно, проблема: у тебя в коде есть несколько мест где используется подобная обработка событий:

@side-emit="(side, id) => { 
    this.players[id].side = side; 
    ...
}"

Причина ошибки в том, что ты тут явно используешь this, а внутри шаблона он не нужен, т.к. либо раскрывается неявно автоматически, либо, в случае со <script setup>, не используется вовсе. Следует запомнить: никакого this в шаблонах.
Вот так будет работать:

@side-emit="(side, id) => { 
    players[id].side = side; 
    ...
}"

Почему работает в режиме разработки? Потому что во время разработки используется упрощённый режим сборки, который совершенно случайно делает доступным правильный this в данном конкретном случае. Просто так совпало.

Ну и касательно кода: в данном случае использовано аж два антипаттерна, которые лучше вообще не употреблять:
1. События компонента должны эмитить ровно одно значение. Да, vue позволяет эмитить и принимать сколько угодно значений, однако чаще чем следовало бы это приводит к плохому коду. Желательно придерживаться правила: одно событие - один payload, как в обычных событиях js.
2. Не следует декларировать функции внутри шаблона. Шаблон сам по себе должен содержать минимальное количество кода. Да, vue позволяет использовать любой js в шаблоне, однако чаще чем следовало бы это приводит к плохому коду. В шаблонах следует использовать маленькие кусочки кода, условно: @side-emit="someValue = $event ? 1 : 2", а что-то сложнее просто выносить в метод компонента\composition функцию: @side-emit="onSlideEmit".

Приложение собирается сборщиком. Все импорты обрабатываются на стадии сборки, и на стадии сборки же включаются в бандл(основной js файл).
Если вы указываете переменную в пути - это значит только то, что в бандл будут включены ВСЕ файлы находящиеся по такому пути.
Никакие новые файлы(отсутствующие при сборке) уже собранное приложение грузить через import не будет.

Нужна загрузка новых файлов по url? Придётся делать всё руками по-старинке.

Нужна загрузка таки уже имеющихся? Уточняйте путь до минимального:

import(`../Screen/About/${currentScreen.name}.jsx`);

И помните, что в бандле будет ВСЁ по маске `../Screen/About/*.jsx`.
Хоть какое-то уточнение стартового пути необходимо, потому что иначе сборщик бы собрал в бандл вообще все файлы на вашем компьютере, что, думаю, не желаемое поведение.

Возможно что-то поменялось для сборки через vite(т.к. он пользуется модулями), но тут не подскажу.

Очевидно, что он цепляется по id к tracking-widget-script. Поищите в документации, что можно поменять или обратитесь к ним в поддержку.

A. Использовать css animation.
B. Использовать для программной анимации requestAnimationFrame вместо setInterval.
B.1. Не тасовать элементы в dom.

A&B. Использовать для анимации transform: translate вместо position.

На второй вопрос вам ответил Stalker_RED, ответ же на первый вопрос:
потому что, даже после того как вы остановили MediaRecorder, сам аудио-поток(stream) у вас всё ещё захвачен и вы можете слушать его дальше.
Чтобы остановить поток - надо остановить все трэки в нём, примерно так:

function stopStream(stream) {
  stream.getTracks().forEach(
    (track) => track.readyState === 'live' && track.stop()
  );
}

P.S. К Vue вопрос отношения не имеет.

Ошибка точно не в этой строке, а в каком-то магическом коде.

Почему оно возникает?
С высокой вероятностью можно предположить, что:
1. window.dataLayer уже существует.
2. window.dataLayer.push переопределён или window.dataLayer является реактивным (vue?) массивом и отслеживает добавления.(что суть одно)
3. При push вызывается некая функция, которая без всяких проверок на то что значение не пустое делает условно так: puhedValue.ecommerce.hasOwnProperty(...) на чём благополучно и падает.

Что делать?
Не добавлять объект, в котором ecommerce: null, эта хрень ожидает, что ecommerce будет объектом и никак иначе.

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

Что я делаю не так?

Повторно инициализируете при монтировании, duh.

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