Дима Паутов

Да

<template>
  <ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <li 
      class="list-group-item"
      v-for="(menuItem, index) in menu"
      :key="index"
      :class="{
        active: $route.path === menuItem.url
      }"
    >
      <router-link :to="menuItem.url">
        {{ menuItem.title }}
      </router-link>
    </li>
  </ul>
</template>

export default {
  data: () => ({
    menu: [
      {
      	title: 'Перспективное меню',
        url: '/nutrition/foodmenu'
      },
      {
      	title: 'Журнал питания',
        url: '/nutrition/journal'
      },
      {
      	title: 'Амбарная книга',
        url: '/nutrition/ambarbook'
      }
    ]
  })
}

Или коротко:

<ul  class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/foodmenu' }"> <router-link to="/nutrition/foodmenu">Перспективное меню</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/journal' }"><router-link to="/nutrition/journal">Журнал питания</router-link></li>
  <li class="list-group-item" :class="{ active: $route.path === '/nutrition/ambarbook' }"><router-link to="/nutrition/ambarbook">Амбарная книга</router-link></li>
</ul>

т.е. ручками у каждого пункта, иных решений нет.
P.S. это самое галимое решение!

https://jsfiddle.net/q18kuj3v/

Да, всё так как вы описали.

Насчёт OAuth конечно я бы не сказал, что прям это супер обязательно, иногда можно прибегнуть просто к jwt токену. OAuth по мимо безопастности даёт ещё много преимуществ, например как единый сервер для авторизации пользователей для множества проектов. Как по сути всякие соц. сети дают возможность. Если у вас простой проект и в нём нет каких либо очень важных данных, то можно и без OAuth обойтись. Это просто моё мнение))

<template>
  <div>
    {{ myProp }}
  </div>
</template>

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'myProp',
    ]),
  },
  watch: {
    myProp () {
      this.myMethod()
    },
  },
  methods: {
    myMethod () {
      console.log('Hello, world!')
    },
  },
}

Это затирает прошлые данные на новые
this.info.push = response.data
Значит логично, что нужно не заменять массив, а добавлять в него новые элементы, т.е.

this.info.push.push(response.data)

очень может быть. Если AdSense работает напрямую с html и парсит нужные блоки, то да, проблема скорей всего в этом.

https://www.npmjs.com/package/vue-click-outside

Юзаю nuxt.axios
Плагин для axios у меня, который обрабатывает ошибки
/plugins/axios.js

export default ({ $axios, error, $auth }) => {
  $axios.onError(({ response }) => {
    const statusCode = response.status
    const message = response.data.message

    switch (statusCode) {
      case 401:
        $auth.logout()
        break

      case 422:
        break

      case 500:
        break

      default:
        error({
          statusCode,
          message,
        })
    }
  })
}

Каждый статус код в конструкции switch позволяет приложению не падать, а работать дальше, что бы вы смогли в месте, где вызываете метод, вернувший ошибку что либо сделать. Или же, как у меня в случае с ошибкой 401 написать свою логику.

Далее, в компоненте где используется функция для запроса:
/pages/sign-in.vue

export default {
  methods: {
    async onSignIn () {
      try {
        await this.$auth.signIn(...)
      } catch (error) {
        this.showErrors(error)
      }
    },
  }
}

Само тело функции

async signIn ({ username, password }) {
    const { token, expireAt, user } = await $axios.$post(..., {
      username,
      password,
    })
    //....
  }

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