Evgeny Kulakov

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

arr2.find(i => i.id === product_id).text

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

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

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

Добавьте листенеры в компонент, и делайте в них обработку:

mounted() {
        window.addEventListener('keyup', this.keyup)
    },
destroyed() {
        window.removeEventListener('keyup', this.keyup)
    }

Возможно имеет смысл использовать хук роутера. Т.е. в компоненте или глобальном хуке разрешения перехода использовать:

beforeRouteEnter (to, from, next) {
    const session = this.$cookie.get('session');
	if(session) next({path: '/search-content'});
  },

Потому что для options в watch вы используете стрелочная функцию и в итоге получаете не тот контекст. Напишите options(val) {... }

Про плагин уже сказали, но можно еще самому навелосипедить типа такого:
делаем стору:

{
  state: {
    currentLang: 'RU',
    translations: {
      RU: {
        label1: 'some ru text',
        label2: 'some ru text',
      },
      EN: {
        label1: 'some en text',
        label2: 'some en text',
      }
    }
  },
  getters: {
    translate: (state) => (label) => {
      return state.translations[state.currentLang][label]
    }
  }
}

Потом обращаться в компоненте: this.$store.getters.translate('label1')
Т.е. все переводы будут у вас в этой сторе, что должно быть удобно. Также можно подкрутить, чтобы можно было какие-то параметры в строку передавать, чтобы динамически подставлять какие-то значения в нее.