TypeError: Cannot read properties of undefined (reading 'getters')

import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from 'vuex'
import axios from 'axios'
 
const store = createStore({
  state: {
    banners: []
  },
  mutations: {
    SET_BANNERS_TO_STATE: (state, banners) => {
        state.banners = banners;
    }
  },
  actions: {
    GET_BANNERS_FROM_API ({commit}) {
        return axios("http://localhost:3000/banners", {
            method: "GET"
        })
        .then((banners) => {
            commit('SET_BANNERS_TO_STATE', banners.data);
            return banners;
        })
        .catch((error) => {
            console.log(error);
            return error;
        })
    }
  },
  getters: {
    BANNERS(state) {
        return state.banners;
    }
  }
})
 
const app = createApp(App).mount('#app')
app.use(store)

<template>
    <div class="dc-home-banner-list">
        <dcHomeBannerVue 
            v-for="banner in BANNERS"
            :key="banner.id"
            :banner_data="banner"
        />
    </div>
</template>
 
<script>
    import dcHomeBannerVue from './dc-home-banner.vue';
    import { mapActions, mapGetters } from 'vuex';
    
 
    export default {
        name: "dc-home-banner-list",
        components: {
            dcHomeBannerVue
        },
        data() {
            return {}
        },
        computed: {
            ...mapGetters([
                "BANNERS"
            ]),
        },
        methods: {
            ...mapActions([
                "GET_BANNERS_FROM_API"
            ]),
        },
        mounted() {
            this.GET_BANNERS_FROM_API();
        },
    }
</script>
 
<style lang="scss" scoped>
    .dc-home-banner-list {
 
    }
</style>