Vue: axios выполняется синхронно, а не асинхронно на нескольких компонентах

Я пытаюсь загрузить данные ajax при создании моего компонента, однако это, похоже, заставляет другие элементы, которые также загружаются через ajax в created(), загружать синхронно, а не асинхронно, когда выполняется следующее, этот запрос ajax выполняется около 2 секунд, вызывая все после загружать в синхронном стиле.

Следующий компонент загружается из вызова ajax примерно за 2 секунды:

component1.vue

export default {
  data: () => {
    return { balance: { chips: 0, coins: 0, rewards: 0 } }
  },
  async created() {
    this.balance = (await axios.get('/api/player/balance')).data
  }
}

Этот компонент загружается из вызова ajax меньше секунды:

component2.vue

export default {
  data: () => {
    return { items: [] }
  },
  async created() {
    this.items = (await axios.get('/api/items')).data
  }
}

Оба должны загружаться асинхронно, однако они не загружаются, запускается /api/player/balance, затем запускается /api/items.

Я также пробовал использовать .then() вот так:

export default {
  data: () => {
    return { balance: { chips: 0, coins: 0, rewards: 0 } }
  },
  created() {
    axios.get('/api/player/balance').then(function (response) {
      this.balance = response.data
    })
  }
}

Когда я оборачиваю this.balance = ... в setTimeout, остальные элементы загружаются нормально.

Есть ли лучший способ реализовать это, чтобы запрос ajax выполнялся синхронно?

Редактировать

Использование fetch решает проблему синхронной загрузки запросов и позволяет им загружаться асинхронно.

export default {
  data: () => {
    return { balance: { chips: 0, coins: 0, rewards: 0 } }
  },
  async created() {
    let response = await fetch('/api/player/balance')
    this.balance = await response.json()
  }
}

Есть ли способ сделать это с помощью axios?