Aetae

Какая нафиг отправка статистики в computed? computed не должен иметь сайдэффектов, только отдавать значение.

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

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

P.S. При SSR computed на стороне сервера вообще не кэшируется вроде, т.е. перевычисляется при каждом обращении. Инфа не 100%.)

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

Если очень хочется, то в created вешаешь обработчик на resize(а лучше mediaQuery addListener\onchange раз у тебя есть конкретный берйкпоинт), на destroyed обязательно снимаешь обработчик. Сам обработчик ставит какую-то переменную в data.

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

В action вызывать action - можно.
В отдельный сервис вынести всю работу с сетью, оставив хранилищу только работу с данными - нужно.

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

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

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

beforeEach, либо заполнять все маршруты динамически через addRoute.

useFetch используется в nuxt для косистентной работы с состоянием при SSR.
Если ты не используешь SSR он тебе нафиг не нужен. И да, как уже заметили, этот хук не имеет никакого отношения к axios или fetch как таковому.

Для общего состояния всего приложения: vuex.
Для связки детей которые не могут жить без конкретного родителя с этим родителем: provide \ inject.
Для плотной связки единичных компонентов: отдельный Vue.observable \ Vue.reactive объект импортируемый в нужных компонентах.
Для явного взаимодействия рядомстоящих компонентов, обычный vue-flow: вверх события через $emit и @on, вниз props.

Сделайте свой скрипт: "serve": "node ./api/serve.js", а уж в нём что хотите и как хотите вызывайте.

В теории, если vue-cli не лочит эту конкретную настройку webpack: configureWebpack / chainWebpack и output.filename / output.assetModuleFilename.

<div class="lang-changer" @click="toggle = !toggle">
  <div :class="toggle ? 'lang-tog': 'lang'">
    <span :class="toggle ? 'a': 'b'">РУ</span>
    <span :class="toggle ? 'x': 'y'"></span>
  </div>
</div>

data(){
  return {
    toggle: false;
  }
}

Правда стили вложенных span по-хорошему лучше просто через css менять, относительно верхнего.

Не путай v-on:\@ и v-bind:\: - это разные вещи и они работают по-разному.
v-bind на вход получает выражение, т.е. по сути чистый js, и исполняет его, при:
:clickMethod=" $router.push('/auth')" в свойство clickMethod прилетит результат вызова $router.push('/auth').

При v-on на компонент вешается слушатель событий, т.е , при:
<MainButton @clickMethod=" $router.push('/auth')" условно(на самом деле там внутренняя система) происходит следующее:

MainButton.addEventListener('clickMethod', ($event) => {
    this.$router.push('/auth')
})

Чтобы передать в clickMethod коллбэк, ты должен собственно передать туда заранее заданный в компоненте метод:

<MainButton :clickMethod="clickMethod"
methods: {
  clickMethod() {
    this.$router.push('/auth')
  }
}

Но так делать ни в коем случае не надо. Так пишут в React и это очень криво. Надо использовать именно v-on:\@ и $emit, как посоветовал Alex_mos . Это гораздо более удобно и контролируемо. Ну и в принципе это vue-way: вниз props - вверх события.

Документация: pwa.iconPaths?

Заюзать ::before и ::after с минусовым z-index. Им ставить по очереди background и анимировать opacity для наложения.

<div
  v-for="item in splitComments"
  :key="item.id"
  class="comment-item"
>
  ...
  <span 
    class="comment-text" 
    v-for="(str, i) in item.textList" 
    :class="{highlight: i%2}"
  > 
      {{ str }} 
  </span>
</div>

computed: {
  splitComments() {
    return this.comments.map(item => ({
      ...item,
      textList: item.text.split(/(@\S+)/)
    }))
  }
}

В ошибке всё сказано:

Expected Boolean, got Object

Не знаешь английский - используй гугл транслейт:

Жду Boolean, а ты мне суёшь Object

:exact="index === 0"

Со времён vue 2 ничего не поменялось: тебе нужен name: