Vuex 4 modules not working when refactoring modules to seprate files

Question

I've been learning vuex4 and there I wrote all state,actions,getters... in main.js

Now I've gotten to modules and I tried to refactor my code to modules in seprate files. Everything is working except for one v-for loop where numbers should appear but do not. The number should appear when number changes on the app under "history".

I'm updating history array with mutations "addToCounter" and "minToCounter" found in counter.js

History.vue (this is where v-for loop doesn't work)

  <div class="container">
    <h4>History</h4>
    <div class="flex">
      <p
        v-for="(number,index) in history"
        :key="index"
        :class="activeIndexes(parseInt(value)).includes(index) && 'bold'"
      >
       {{number}}
      </p>
    </div>
    <input
      type="text"
      placeholder="search by index"
      v-model="value"
    >
  </div>
</template>

<script>
import {mapState, mapGetters} from "vuex";

export default {
  data(){
    return{
      value: 0,
    }
  },
  computed: {
    ...mapState(['history']),
    ...mapGetters(['activeIndexes']),
  }
}
</script>

<style>...</style>

counter.js (the module is saved in modules/counter.js)

import axios from "axios";

const state = {
        counter: 0,
        history: [0],
};
const mutations = {
    addToCounter(state, payload){
        state.counter = state.counter + payload;
        state.history.push(state.counter)
    },
    minToCounter(state, payload){
        state.counter = state.counter - payload;
        state.history.push(state.counter)
    }
};
const actions = {
    //async je takrt k zahtevamo nek http request npr od api-ja spodnji primer:
    async addRandomNumber(context) {
        let data = await axios.get('https://www.random.org/integers/?num=1&min=-1000&max=1000&col=1&base=10&format=plain&rnd=new');
        context.commit("addToCounter",data.data);
    }
};
const getters = {
    activeIndexes: (state) => (payload) => {
        let indexes = [];
        state.history.forEach((number, index) => {
            if(number === payload) {
                indexes.push(index)
            }
        });
        return indexes
    }
};

export default {
    state,mutations,actions,getters
}

main.js

import { createApp } from 'vue'
import { createStore } from 'vuex';
import counter from "./modules/counter";

import App from './App.vue'

const store = createStore({
    modules: {
        counter: counter,
    }
})

createApp(App).use(store).mount('#app')

Answer 1

figured it out :).

in History.vue

I changed:

computed: {
…mapState([‘history’]), → …mapState([‘counter’]) //as module name is counter
…mapGetters([‘activeIndexes’]),
}

and then for v-for

v-for="(number,index) in history" → v-for="(number,index) in counter.history"