dark_king_13

https://www.typescriptlang.org/docs/handbook/utili...
Partial

UI kit вам в помощь. выбирайте на свой вкус и цвет.
Примеры:
тыц раз
тыц два

parentComponent

<template>
  <child-component ref="childComponent" />
</template>

export default {
  methods: {
    action() {
      this.$refs.childComponent.action();
    }
  },
}

<div @mouseenter="hoverClass='myclass'" @mouseleave="hoverClass=''"  :class="hoverClass"></div>

ну и добавить hoverClass:'' в data
вообще, реактивность - вещь! https://jsfiddle.net/4nokawsf/3/

Необходимо прописать переменные окружения в файле nuxt.config.js:

const config = {
  env: {
    HOST: process.env.HOST || '',
  }
}

export default config;

Nuxt configuration env

Или воспользоваться модулем: @nuxtjs/dotenv

Вот например так, если плагин какой то выбирать.

Демо.

Сам по себе localStorage не реактивен, так что ваш computed не имеет особого смысла.

По-хорошему token просто надо хранить в рективном store(не обязательно vuex, можно просто observable), и во всех местах получать и класть его через этот store. Тогда всё будет работать из коробки.
Если же в localStorage token прилетает откуда-то сам, то придётся вам повесить событие onstorage и отлавливать изменения вручную в нужных местах.