Vuex 4 modules not working when refactoring modules to seprate files

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
I also console logged the state history and it gets updated (https://prnt.sc/1vbprhw)

EDIT: I think the problem is in History.vue when defining computed variables mapState,mapGetters do i need to define what module those state’s/getter’s are in? and if that is the problem how do I do this?

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')

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"