затем axios.get('users/friends') в экшене

Ну
Нашёл на so вполне себе неплохой вариант
https://stackoverflow.com/a/63693322/15440048
Вполне себе устраивает)
Хотя конечно в ответе ещё выше расположен вариант с правильным расположением API вызовов, но он мне показался слегка запутанным, чем по ссылке

все эти настройки как раз можно добавить в nuxt.config

Даже если в сам api вставляются аргументы?
'users/friends/' + username + '/remove'

нет

А жаль) Было бы неплохо

так это в экшн все лезет

https://axios.nuxtjs.org/usage/ вот

Ну да
Пришлось переписать на это дело)
Вариант выше хоть и был визуально удобнее, так как всё сводилось к подобной строчке:

async fetch()
    let data = api.get_user(this.user.username)

Но дальше с этим было проблематично работать.
Например, я хз как к импортируемому файлу api получить доступ в темплейте
Поэтому переписал под вышепредложенный вариант
Но код немного кажется избыточным, потому что чтобы обновить состояние переменной в state приходится вызывать мутацию из actions:

export const state = () => ({
  friend_status: null,
})

export const mutations = {
  set_friend_status(state, payload) {
    state.friend_status = payload
  },
}

export const actions = {
  async friend_request_send({commit}, username) {
    const {data} = await this.$axios.get('/users/friends/' + username + '/send')
    commit('set_friend_status', data)
  },
}

Хотя может я что-то не так делаю)

Ещё вопрос в догонку
Имеется компонент Profile, в котором находится как раз элемент добавления/удаления пользователя из друзей, отправки заявки и т.д.(на скрине)
И нужно, чтобы при клике на кнопку в зависимости от ответа сервера эта кнопка перерисовывалась сразу. Ну типо отправил запрос - сервак ответил, что "да, я принял твой запрос, вот тебе ответ - кнопка перерисовалась"
И я ничего не нашёл лучше, кроме как отслеживать состояние той самой friend_status, через :key='$store.state.friends.friend_status и перерисовывать компонент Profile целиком
Но как это делается правильно?
Т.е. как мне обновить какой-либо компонент/элемент на странице без :key?

А ошибки вообще никак не обрабатываются?

В будущем надо будет ещё как-то вебсокеты подрубать, чтобы элементы перерисовывали себя, если бэк инициирует событие

Это чуть позже
Мне сейчас прототип проработать, а дальше уже и возможные ошибки высматривать стану

не понял немного честно)

тебе удалить элемент и добавить элемент из дом нужно?

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

https://gitlab.com/-/snippets/2132344
Вот такой компонент, например
Через v-if определяется, какую кнопку должно рендерить в текущий момент
friend_status лежит в data и принимает в себя this.$store.state.friends.friend_status:

  data() {
    return {
      friend_status: '',
    }
  },
  async fetch() {
    this.$store.dispatch('friends/get_friend_status', this.user.username)
    // Получаем статус дружбы для пользователя в просматриваемом профиле
    this.friend_status = this.$store.state.friends.friend_status
  },

Но без :key кнопка на основе условия в темплейте не перерисовывается

(хотя если делать это через watch, то всё начинает работать)

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