Aetae

Router 4 - для Vue 3, для 2 нужен 3.

А откуда тебе знать сколько он займёт, если данные произвольны?

Если в receivedData может быть фиксированное количество записей фиксированных размеров, то условно как-то так:

<div v-if="loading">
  <div v-for="foo in 10" class="fixed-size loading"></div>
  Loading
</div>
<div v-else>
  <div v-for="foo in receivedData.foo" class="fixed-size">{{ foo }}</div>
  {{ receivedData.bar }}
</div>

const products = {
  value: false
};
console.log(products)
console.log(products.value)
products.value = true;

Разницы с ref в данном случае никакой.

1. Какой-либо общий css можно использовать только в том случае если компоненты дети не могут существовать без компонента родителя. В таком случае выделяете отдельную папочку под такую связку компонентов, там делаете файлик <compnent-group-name>.variables.scss и импортируете его куда надо.
2. Если эти компоненты не связаны - любые управляющие и изменяющие поведение компонента вещи нужно передавать исключительно через props. Каждый отдельный компонент - чёрный ящик. У тебя должна быть возможность полностью и кардинально изменить вёрстку внутри компонента, не изменив его поведение. В vue 3 для этого даже есть удобная конструкция v-bind внутри <style>.

P.S. Ну и само собой если этот $gap глобальный параметр, можно в конфиге vue\sass-loader добавить общий для всех файл с переменными.

По поводу джанго и что там с CORS ничего не скажу, но если ты используешь @vue/cli или просто webpack для разработки фронта на той же машине, это решается удобно на стороне devServer прописыванием proxy, который собственно прозрачно проксирует все запросы к бэку куда укажешь, без дополнительной настройки сервера.

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

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

Какбэ для этого и придуманы scoped и module стили. Если вы не озаботились этим сразу - сами виноваты.

Быстро закостылять можно добавив родительский префикс-класс на корневой компонент лэйаута и настроить loader для автоподстановки. Ну или руками расставить.

В каком-ниюудь модуле укажи:

declare global {
  const VUE_APP_WS_URL: string | undefined;
}

В тайпскрит всё должно быть типизированнно. Ты не можешь просто с потолка брать какие-то переменные.

this внутри function зависит от контекста вызова этой function.
Когда срабатывает onAuthStateChanged - вызывается переданная ему функция-обработчик, которой устанавливается какой-то this(или не устанавливается, и тогда он по умолчанию window или, в строгом режиме, undefined). И этот this точно никак не связан с текущим this Vue, потому что тот никаким образом не передан при вызове, и, соответственно onAuthStateChanged о нём ничего не знает.

Используй:
a) (async function(user) { ... }).bind(this) чтобы жёстко привязать эту функцию к this.
b) vm.g = 5;, т.к. таким образом конкретный this сохранён в переменную и не меняется в зависимости от контекста вызова.
c) стрелочную функцию async (user) => { ... }, её механика работы по сути осуществляет неявный bind.
d) функцию обработчик в методах Vue: Vue автоматически делает bind всех методов к this:

onAuthStateChanged(this.onAuthStateChanged)
methods: {
  onAuthStateChanged: async function (user) { ... }
}

В vue 3 всё ещё работают параметры extends и mixins. Не понятно чего ты пытаешься сделать.

export default defineComponent({ ... })

Обычно это делается в beforeEach.

Id "app" к которому привязан vue - у формы. Контент ниже - вне этой формы. Т.е. к vue отношения не имеет.

https://vuetifyjs.com/en/features/sass-variables/#...

1. Не используй это говно, оно сделано человеком не понимающим как работать в vue.
2. Что-то типа того(не проверял):

this.$refs.commentsTab.active = true;
this.$nextTick(() => this.$refs.commentsTab.$el.scrollIntoView());

Поздравляю, ты нашёл баг в @vue/cli. Заведи им issue на github.

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

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

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

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

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

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

или

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

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

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