Aetae

1. id - уникальный идентификатор, он должен быть в одном экземпляре.
2. В vue неопределённое количество input'ов выглядит примерно так:

<div id="container">
  <input v-for="input in inputs" v-model="input.value" :name="input.name" type="hidden" >
</div>

data: {
  inputs: [
    {
      name: 'k1', 
      value: ""
    }, 
    {
      name: 'k2', 
      value: ""
    }
  ]
}

И значения получаются, соответственно, из массива inputs.

В Vue ты работаешь с данным, а не с dom, dom лишь отражает состояние данных.

Используй стрелочную функцию вместо обычной и почитай как работает this в javascript.

Нет. SSR работает ровно один раз - при первом открытии. При дальнейших переходах у тебя работает обычное SPA с xhr запросами за данными. asyncData как и много другое в nuxt - это просто абстракции, призванные скрыть разницу меж SSR и обычной работой SPA.

Если это изменение нужно делать всегда, независимо ни от чего иного то просто: watch:

store.watch(state => state.budget.settings.month, () => store.dispatch('budget/GET'))

Примерно так:

Это обычный способ.

axios.interceptors.request.use(async config => {
  const token = await getToken(); // тут либо отдаём живой токен сразу, либо получаем новый
  config.headers.Authorization = 'Bearer ' + token;
  return config;
});

Ошибок ждать не надо.

Но вообще, у nuxt есть свой auth модуль, где всё уже заранее продумано и предусмотрено, так что лучше юзай его.

Тэг menu есть в спеке html, хоть и deprecated вроде, а так - тебе ничто не мешает юзать незарезервированные названия.
Ну или если очень хочется, можно на свой страх и риск перебить и зарегистрированные тэги:

Vue.config.isReservedTag = function(isReservedTag){
  const allowedTags = ['menu'];
  return function(tag) {
    if(allowedTags.includes(tag)) return false;
    return isReservedTag.call(this, tag);
  }
}(Vue.config.isReservedTag);

По адресу 'vue' у вас, очевидно, лежит не Vue. Я предположу, что у вас в vue.config.js прописан алиас vue: что-то.

Сделайте:

import * as all from 'vue'
console.log(all)

и посмотрите что там у вас на самом деле.

Во-первых: watch - это внутренняя особенность Vue, и работает она только на реактивных свойствах.
Во-вторых: событий на изменение cookie не предусмотрено, но всегда можно просто самостоятельно смотреть за изменениями по интервалу, примерно так:

const cookies = Vue.observable({});

(function update(prevString) {
  const cookieString = document.cookie;

  if (prevString !== cookieString) {
    const cookieObject = Object.fromEntries(
      cookieString.split(/; */)
        .map(
          c => c
            .split('=', 2)
            .map(decodeURIComponent)
        )
    );

    for (const [name, value] of Object.entries(cookies)) {
      if (name in cookieObject) {
        if (cookieObject[name] === value)
          delete cookieObject[name];
      } else {
        Vue.delete(cookies, name);
      }
    }

    for (const [name, value] of Object.entries(cookieObject)) {
      Vue.set(cookies, name, value);
    }
  }

  setTimeout(update, 100, cookieString);
}());

Vue.util.defineReactive(Vue.prototype, '$cookies', cookies);

Теперь можешь делать так this.$watch('$cookies.cookie_name', () => {...})
(если нужна поддержка установки новых значений через this.$cookies.cookie_name = 'cookie_value' - тут уж самостоятельно)

Vuex/eventBus.

Функция require, очевидно, исполняется* во время создания(декларации) экспортируемого объекта, задолго до того как этот объект попадёт в Vue и превратится в Vue-компонент.
Функция require, очевидно, исполняется в глобальном контексте, в котором недоступен (какой-либо) this.

Нормальное решение вашей проблемы выглядит примерно так.

<template>
  <div>
    <component :is="SvgView" class="sp-svg-styles"/>
  </div>
</template>

<script>
export default{
  props:['name'],
  computed: {
    SvgView() {
      return require('./../Icons/'+this.name+'.svg');
    }
  }
}
</script>

*require на самом деле работает на этапе компиляции, подготавливая и загружая в бандл все файлы по маске ./../Icons/*.svg, а на этапе исполнения заменяется внутренней функцией, возвращающей значение по имени.

Плохой ответ: Vue.compile().
Правильный ответ: работая с Vue(да и не только) ты не должен гонять html-разметку, ты должен гонять данные. За всё оформление должен отвечать фронт. В том числе и каким компонентом отображать какие данные.

CSS white-space: pre-wrap?

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

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

Конкретно в приведённом примере подход с css +- не должен привести к проблемам, но в большинстве случаев ситуация иная.

Ну во-первых по-хорошему такого быть не должно.
Компоненты общаются через пропсы и события: сверху пропсы, снизу события.
Изменились данные в компоненте 1? Он послал событие update, а родитель его поймал и что-то сделал.

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

Ну и через ref тоже можно, но тут следует продумать архитектуру с публичными и внутренними методами, чтоб поддержка не превратилась в ад.

Вы думали написали слово async и оно само внезапно стало асинхронным? Ничего подобного. У вас всё разлетается на кучу параллельно исполняемых функций, и никто никого не ждёт. Изучайте асинхронность в javascript или используйте синхронные функции(с постфиксом Sync).

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

const arr = this.$store.getters.templatesList.slice(0);

Ну и для сортировки есть встроенный метод sort:

arr.sort(({created_at:a}, {created_at:b}) => a < b ? -1 : a > b ? 1 : 0);

Также как и без Vue - дождаться загрузки: <img @load="doSomething" />