Problem with dynamic store with Vue 3 and Vuex 4

Question

So I created index.js file which looks like this

import { createStore } from "vuex";

/**

 * Load store modules dynamically
 */

const modules = import.meta.glob('./modules/*.js', { eager: true })

for (const path in modules) {
    if (modules.hasOwnProperty(path)) {
        let p = path.split('./modules/').pop().split('.js')[0];
        modules[p] = modules[path];
        delete modules[path];
    }
}

const store = createStore({
    modules
});

export default store;

This file should load modules dynamicallyin main.js which looks like this

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

/**
 * Import routes
 */
import router from "./router";
import store from "./store";

import BootstrapVue3 from 'bootstrap-vue-3'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

app.use(store)
   .use(router)
   .use(BootstrapVue3)

app.mount('#app')

My modules auth file looks like this

//State
export const state = {
    accessToken: window.localStorage.getItem('token'),
    user: null,
};

export const getters = {
    getAccessToken: state => state.accessToken,
    getAuthenticatedUser: state => state.user,
};

// Mutations
export const mutations = {
    AUTH_LOAD_FROM_STORAGE(state) {
        state.accessToken = window.localStorage.getItem('token');
        state.user = window.localStorage.getItem('user');

        if (!state.accessToken) {
            state.accessToken = null;
            state.user = null;

            window.localStorage.setItem('token', null);
            window.localStorage.setItem('user', null);

            window.location.href = '/login';
        }
    },

    AUTH_LOGIN(state, {accessToken, user}) {
        state.accessToken = accessToken;
        state.user = user;

        window.localStorage.setItem('token', accessToken);
        window.localStorage.setItem('user', user);
    },

    AUTH_LOGOUT(state) {
        state.accessToken = null;
        state.user = null;

        window.localStorage.setItem('token', null);
        window.localStorage.setItem('user', null);
    }
};

// Actions
export const actions = {
    async login({commit, dispatch}, payload) {
        commit('AUTH_LOGIN', payload);
    },
};

And I am trying to use dispatch in Login.vue component

methods: {
    async onLoginFormSubmit() {
      await this.loginForm.post('/api/login')
          .then(({ data }) => {

            this.$store.dispatch('auth/login', {
              accessToken: data.access_token,
              user: data.user
            });
          })
          .catch(error => {
            if (error.response && error.response.status && error.response.status !== 422 && error.response.data && error.response.data.message) {
              this.$store.dispatch('alerts/addRegularAlert', {
                contentHTML: error.response.data.message,
                dismissible: true,
                duration: 0,
                type: 'danger'
              });
            }
          });
    }
  }

Everytime I try to login I get this message [vuex] unknown action type: auth/login so if anyone here can explain to me why is this happening I would be grateful.