Nuxt3: асинхронное получение данных из pinia

Имеется компонент nuxt3, который должен асинхронно получать объект из хранилища pinia

<template>
   ...
</template>

<script setup>

import {useProductStore} from "~/stores/productStore";
const store = useProductStore()

const filterColors = await store.filterColors;
const {isChecked} = store
store.getFilterColors()
console.log(filterColors)

</script>

Имеется хранилище pinia, которое получает данные из API

const url = "..."


export const useProductStore = defineStore('productStore', {

    state() {
        return {
                 filterColors: {}
                }
            },
actions: {

        async getFilterColors() {
                const response = await fetch(`${url}filters/colors/`);
                this.filterColors = await response.json();
                console.log(this.filterColors);
        }
}

Проблема в том, что компонент получает пустой объект. Данные в хранилище поступают и выводятся в консоль. Если объект захардкодить в хранилище - всё передаётся как и должно в компонент.

И ещё мистика в том, что периодически данные в компонент таки проскакивают, и в браузере отображаются