Aetae

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

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) { ... }
}

Условно так:

const RunOutsideAngular = (target: any, memberName: string) => {
  const method = target[memberName];
  return Object.defineProperty(target, memberName, {
    writable: true,
    configurable: true,
    value(...args: any[]) {
        return this.ngZone.runOutsideAngular(method.bind(this, ...args))
    } 
  });
};

const RunOutsideAngularAll = (constructor: Function) => { 
    const keys = new Set<string>(); 
    let proto = constructor.prototype;

    do {
        if(proto === Object.prototype) break;

        Object.getOwnPropertyNames(proto).forEach(
            key => typeof proto[key] === 'function' 
                && key !== 'constructor'
                && keys.add(key)
        );
    } while (
        proto = Object.getPrototypeOf(proto)
    );

    keys.forEach(key => RunOutsideAngular(constructor.prototype, key));
}

class SomeClass {
    @RunOutsideAngular
    myFunc() {
        mycode.....
    }
}

// или

@RunOutsideAngularAll
class SomeClass {
    myFunc() {
        mycode.....
    }
}

RunOutsideAngular - по-хорошему надо типизировать дженериком под ангуляр.
RunOutsideAngularAll - обрабатывает все методы и функции, в т.ч. унаследованные, можно упростить чтоб работал только с методами текущего класса.

В ошибке всё написано. Прямой импорт из .json выводит недостаточно строгий тип. Метод ожидает что type будет строго одно из "direct" | "fanout" | "headers" | "topic", а получает просто string.

Можно сделать так:

return (await this.rascal.create(RascalConfig as BrokerConfig))

Но это чревато ошибками в самом конфиге.

Единственное на данный момент надёжное решение(пока не добавят эту фичу) - держать конфиг в .ts файле в виде:
const RascalConfig: BrokerConfig = { ... }
или
const RascalConfig = { ... } as const

Ну или написать простенький генератор соответствующего .d.ts к каждому .json.

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

export default defineComponent({ ... })

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

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

Добавить локаль и поправить класс header:
Разбираться как сделать понедельник первым днём не стал, потому что очевидно оно сделано через зад(сделали бы нормально, первый дей автоматически с локалью бы поменялся).

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

Array.forEach - синхронный. Он не будет ждать промисов. Либо используй какие-то либы которые умеют асинхронный each и всё остальное, либо используй обычный цикл:

for (const lId of locationIds) {
  const syncResp =  await fetch(`https://server/sync-one-c/26/41/${lId}`).then(resp => resp.json())
  console.log('lId -> ', lId, 'done', syncResp)
})

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

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

Магии не существует, друже.
Что на самом деле делает webpack лоадер? Он берёт на вход какой-то файл, что-то с ним делает и выдаёт js-модуль(в виде строки) с результатом + какие-то побочные действия.

Соответственно css-loader для модулей делает (утрировано) 2 вещи:
1. Из входного css генерирует js-модуль с объектом вида

{ [ключ - настоящее имя класса]: [значение - минифицированное] }

и отдаёт результат в js.
2. Выполняет замену в css настоящих имён на минифицированные и сохраняет отдельно.

Чтобы получить то, что ты хочешь - надо добавить некий loader для .js файлов который удалит все импорты css-модулей из кода(но сохраняя результаты) и заменит все обращения вида $style.className на значения из этих модулей.
Погугли, что-то такое кто-то должен был запилить.)
Ну и в любом случае, чтобы это работало нужна гарантия, что никакой динамики у тебя в коде работы с css модулями нет, т.е. что-то такое: $style[somevar + '__bold'], гарантировано сломает любую такую штуку.