undefined (reading 'getters') di Vue.js

jadi saya lagi belajar dari video kak hilman yang tentang single page vuejs tapi di awal pertengahan ada error yang sudah di cari solusinya tapi belom ketemu

ini untuk state.js

export default {
    membersState: [
        {
            id: 1,
            name: 'man',
            point: 10,
            img: 'https://docs.vuejs.id//images/logo.png'
        },
        {
            id: 2,
            name: 'woman',
            point: 20,
            img: 'https://docs.vuejs.id//images/logo.png'
        },
        {
            id: 3,
            name: 'stickerdev',
            point: 30,
            img: 'https://docs.vuejs.id//images/logo.png'
        },
    ],
}

getter.js

export default{
    membersState: state => {
        return state.membersState
    }
}

main.js

...

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>',
})

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

MainView.vue

<script>
    import { mapGetters } from 'vuex'

    export default{
        computed: {
            ...mapGetters([
                'membersState'
            ])
        },
    }
</script>

sudah mengikuti cara dari kak hilman tapi selalu ada error di log

Cannot read properties of undefined (reading 'getters')

apakah versi dari depedensi juga mempengaruhi? atau ada solusi yang lain?