Evgeny Kulakov

<template>
  <ul>
    <li v-for="i in 6" @click="current = i" :class="{active: current === i}">
      элемент списка
    </li>
  </ul>
</template>

data() {
  return {
    current: 0
  }
}

Слишком абстрактные вопросы. Сделайте с вашей вёрсткой и оцените производительность. Целиком перерисовываться ничего не будет. У каждой подобной библиотеки свои механизмы улучшения производительности. В варианте с вью, у вас скорее всего произойдёт просто добавление в список одного элемента и сравнение других элементов на изменение. И далее перерисовка того, что изменилось.

В ворнинге вроде ясно написано, что не стоит в шаблоне использовать тэг скрипт так для избежания нежелательных эффектов он не будет париться.

Как-то так: https://jsfiddle.net/xwh95n2m/

Не стоит в этом файле использовать эту конструкцию, т.к. по сути у вас это клиент для работы по сети. Возвращайте данные из клиента в компонент и уже в нем выполняйте необходимые действия.

Можно проверку добавить:

{'checkordion__section--opened': spoilers && spoilers[key].shown}

Ну нормальный вариант. Можете вынести в отдельный файл, чтобы код по чище выглядел.
Если используется vue-router, то можно в хук beforeEach засунуть и поставить флаг, чтобы этот экшн только один раз вызывался.

Если просто вот так написать:

{
      path: '/',
      component: index,
      children: [
        {
          path: ':id'
        }
      ]
}

или вот так:

{path: '/', сomponent: index},
{path: '/:id', сomponent: index}

1. Перехват 403 ошибки можно сделать в интресепторе http клиента, в этом случае вы избавитесь от дублей обработки ошибки.
2. У вас практически все готово, просто сделайте функцию вида:

fetchBuilder(url) {
        return this.$http.get(url).then((responce) => {
            return  response;
        }).catch((error) => {
            if (error.response.status == 403) {
                this.redirectLogin();
            }
       });
};

Пользоваться как-то так:

this.fetchBuilder('/api/messages?uid=' + uid ).then(r => {
   this.messages = r
})

Ну и вам правильно посоветовали использовать vuex, так вы разделите ui и взаимодействие с бэком плюс получите профит в виде реактивного хранилища данных, которые можно будет забрать из любого компонента приложения.

Как-то так:

<template>
  <preloader @show="show = $event"></preloader>
  <header v-if="!show"></header>
</template>

export default {
  data() {
    return {
      show: true
    }
  }
}

В прелоадере:

<template>
  <button @click="handler"></button>
</template>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    handler() {
      this.show = !this.show
      this.$emit('show', this.show)
    }
  }
}

Хотя тут на лицо дублирование, поэтому правильнее, чтобы переменная, которая отвечает за отображение была не внутри компонента, а снаружи.