How to get data from axios request?

I’m having a problem with an axios GET request in my alpine component.
It always returns a Promise instead of the actual data.

The GET request sends an array of id’s (which is stores in localstorage) to an API endpoint, where more data is loaded from the database for each of the id’s. When testing this is Postman, it’s working perfectly.
The problem happens when I’m trying to iterate the results with x-for. It fails because the request do not contain the actual data, but a "Promise < pending >".

I’ve tried to call an aditional .then on my getItems() function but that still only returns the Promise instead of the data. I’ve also tried to use async and await but that doesn’t work either.

Heres my full code:

JS:

import axios from 'axios'
window.Spruce.store('my_store', {
  items: [],
}, true)
window.myComponent = function() {
  return {
    itemIds() {
      return this.$store['my_store'].items
    },
    getItems() {
      return axios.get('http://my-application.test/wp-json/my-api/images/?ids=' + this.itemIds()).then((response) => {
        return response.data
      }).catch((error) => {
        console.log(error)
      })
    },
  }
}

async await attempt

async getItems() {
  return await axios.get('http://my-application.test/wp-json/my-api/images/?ids=' + this.itemIds()).then((response) => {
    return response.data
  }).catch((error) => {
    console.log(error)
  })
},

HTML:

<div x-data="myComponent()">
    <template x-for="item in getItems()">
        <div x-text="item.title"></div>
    </template>
</div>

Anyone know how I’m going to make getItems() return the actual data so I can use it in my x-for loop, in the HTML?

import axios from 'axios'
window.Spruce.store('my_store', {
  items: [],
}, true)
window.myComponent = function() {
  return {
    itemIds() {
      return this.$store['my_store'].items
    },
    getItems() {
      let vm = this;
      return axios.get('http://my-application.test/wp-json/my-api/images/?ids=' + this.itemIds()).then((response) => {
        vm.$store['my_store'].items = response.data; // assign it to items in the store
      }).catch((error) => {
        console.log(error)
      })
    },
  }
}

<div x-data="myComponent()">
    <template x-for="item in $store.my_store.items">
        <div x-text="item.title"></div>
    </template>
</div>