Aetae

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

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

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

Суть в том, как работает then.
"Успешно выполнившийся промис с результатом value", создаётся как и написано. Однако поскольку value - тоже промис, then ожидает его исполнения.
Промис не может возвращать в then промис по определению. Не важно каким образом вы пытаетесь это сделать. Если в возврат попал промис - следующий then будет его ждать. Интуитивность.

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

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

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

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

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

plnkr.co как и любая песочница запускает твой код во фрейме, а консоль по умолчанию работает в основном окне, в котором никакой sum нет.
Выбери фрейм для взаимодействия:

Просто:

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

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

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

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

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

Нет. Тип значения которое уже было возвращено всегда конкретен. Либо это строка, либо это объект.
Можно возвращать объект с методом toString который будет возвращать нужной строку при приведении к строке, но это не равносильно возвращению самой строки.

const ROUTES = {
  blog: {
    art: 'page-art',
    toString() {
      return 'section-blog'
    }
  }
}
ROUTES.blog.art // page-art
ROUTES.blog // object
'text: ' + ROUTES.blog // text: section-blog

Также можно попытаться накостылять магию с прототипом String, но это только в качестве развлечения, на проде за такое руки оторвут.)

lodash

chain(inData)
  .split(/[&=]/)
  .map(decodeURIComponent)
  .chunk(2)
  .transform((obj, [path, value]) => set(obj, path, value), {})
  .value()

Ты тут самую сложную проблему во всём программировании поднял, мужик.)

Чем тебе isTestKeyValid не подходит? Не бойся длинных имён, бойся бессмысленных.

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

В целом - не имеет значения.

P.S. Если получается громоздко - что-то у тебя не так с инпут-элементами. Если тебе приходится им прописывать одно и тоже - сделай обёртку юзающую контекст\provide, в коде не должно быть повторов.

lodash/difference

Что именно он у тебя там "выделяет" то?
Мало кто вообще юзает jshint, а не eslint, а те кто юзают не обязательно имеют тот же конфиг что у тебя.

Безотносительно, по конкретной задаче это делается так:

class Admin extends User{
  constructor(){
    super(true);
  }
}

Если шрифт моноширинный, то, условно, так:

const minGap = 3;
const keys = ['name', 'price'];  
const input = [
  {
    name: "абрикосы",
    price: 20
  },
  {
    name: "тыква",
    price: 50
  },
  {
    name: "уи",
    price: 1000
  }
];


const maxLengths = keys.slice().fill(0);
const normalizedInput = input.map(item => keys.reduce((acc, key, i) => {
  const current = String(item[key]);
  const currentLength = current.length;

  if(currentLength > maxLengths[i]) 
    maxLengths[i] = currentLength;

  acc[key] = current;   
  acc.length += currentLength;

  return acc;
}, { length: 0 }));

const maxLength = maxLengths.reduce(
  (sum, current) => sum + current, 
  minGap
);

const res = normalizedInput
  .map(({
    name, 
    price, 
    length
  }) => name + ' '.repeat(maxLength - length) + price)
  .join('\n');