Aetae

Это называется 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.

SSR-friendly - значит что ты не должен об этом думать, а за тебя подумает фреймворк и сделает всё интуитивно снаружи и правильно внутри.)

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

Просто сделайте свой api нотификаций. Экспортируйте функцию, условно, notify которая вернёт инстанс со всем управлением и импортируйте где надо.

Если зачем-то прям очень надо через шину(зачем?), то можно сделать так:

bus.global.emit("notify", {
    msg: "New SMS code Requested, Success",
    timer: 30,
    uid: '<заданный рукамиидентификатор>'
});

и, опять же, импорт функции управления, типа notification.get(uid), специально для "сложных" случаев. Но это такое себе.

Потому что консоль не клонирует объекты.
false - значение на момент вывода console.log.
true - значение на момент клика тобой на объект в консоли.

Почему такое происходит?
Событие load отрабатывает когда всё что уже было на странице загружено.
Проблема в том, что react-компоненты появляются динамически с помощью js, что выкидывает их из стандартной системы.

Что делать?
Вопрос не простой, ты никак не можешь отследить загрузку bg картинок напрямую.
Способ который будет работать гарантировано, но костыльный и напряжный: взять все нужные картинки и загрузить их в фоне руками через new Image, когда они все будут загружены - можно отобразить.
Иные варианты? Х.з.)

const useScreenResolution: Mock & ((<args type>) => <return type>) = (...) => {...}

?

observe.current.observe(lastElement.current);

lastElement - не элемент, а реф на элемент, о чем тебе ошибка и пишет.

В комментах мы нашли решение настоящей проблемы автора вопроса, однако для тех кто будет искать после, как заметил там же Lynn «Кофеман», таки есть одно решение которое будет работать, ServiceWorker с примерно таким кодом:

self.addEventListener('fetch', (event) => {
  const path = event.request.url.replace(location.origin, '');
  
  if (event.request.method === 'POST' && path === '/byFile') {
    return event.respondWith(
      event.request.formData().then(async (data) => {
        const file = data.get('image');
        
        let resonse = { success: false };
        
        if (file) {
          // await api call
          const { name, size } = file;
          resonse = { success: true, name, size };
        }
        
        return new Response(JSON.stringify(resonse));
      })
    );
  }
});

Он позволит перехватывать все POST запросы к url /byFile и таки делать с этими запросами что хочешь.

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

Задача не очень понятна если честно. Так чтоли?

const sum = ({data}) => data.reduce((a, b) => a + b, 0);

const colors = [
  { primary: '#AAAAAA', secondary: '#AAABBB' },
  { primary: '#BBBBBB', secondary: '#BBBCCC' },
  { primary: '#CCCCCC', secondary: '#CCCDDD' },
  { primary: '#DDDDDD', secondary: '#DDDEEE' },
]; // ЦВЕТА ВСЕГДА В НУЖНОМ ПОРЯДКЕ

const DATASETS = [
  {
    data: [1, 2, 3, 4, 5],
  },
  {
    data: [2, 3, 4, 5, 6],
  },
  {
    data: [3, 4, 5, 6, 7],
  },
]; // МАССИВ МОЖЕТ БЫТЬ ОГРОМНЫМ, ДАННЫЕ ТОЖЕ

const NEW_DATASETS = DATASETS
  .map((dataset, index) => [sum(dataset), index]) // получаем соответствие суммы индексу
  .sort(([a],[b]) => b - a) // сортируем по сумме в обратном порядке
  .map(([,sortedIndex], index) => ({
    ...DATASETS[index],
    ...colors[sortedIndex]
  }));

Х.з. зачем такое может понадобится, если честно.

Нет.

Переписать что-то у себя ты может и сможешь, но безопасность и ограничения фрейма опираются на браузер, а не на изменённый код.