Vuex is not working on Laravel 10 and Vue Js 3

working with Laravel 10 and Vue Js 3 project as well and Installed Vuex 4 with the project. I have following comA.vue file

<template>
    <div>
        <h1>I am com A and the counter is : {{ $store.state.counter  }}</h1>
    </div>
</template>

usecom.vue

<template>
    <div>
        <div class="content">
			<div class="container-fluid">
                <h1>I will show how all other components react to changes</h1>
                <h2>The Master component  : {{ counter }}</h2>
                <div>
                    <comA></comA>
                </div>
                <div>
                    <comB></comB>
                </div>
                <div>
                    <comC></comC>
                </div>

                <Button type="info" @click="changeCounter">change the state of counter</Button>
			</div>
            
        </div>
       
    </div>
</template>

<script>
import comA from './comA'
import comB from './comB'
import comC from './comC'
import {mapGetters, mapActions} from 'vuex'
    export default {
        data(){
            return {
                localVar : 'some value'
            }
        },
        methods:{
            ...mapActions([
                'changeCounterAction'
            ])
        },
        computed : {
            ...mapGetters({
                'counter' : 'getCounter'
            })
        },
        methods : {
            changeCounter(){
                this.$store.dispatch('changeCounterAction', 1)
                //this.$store.commit('changeTheCounter', 1)
            },
            runSomethingWhenCounterChange(){
                console.log('I am running based on each changes happening')
            }
        },
        created(){
            console.log(this.$store.state.counter)
        },
        components : {
            comA,
            comB,
            comC
        },
        watch : {
            counter(value){
                console.log('counter is changing', value)
                this.runSomethingWhenCounterChange()
                console.log('local var', this.localVar)
            }
        }
    }
</script>

and store.js

import { createStore } from 'vuex';

const store = createStore({ state : { conuter : 1000, deleteModalObj : { showDeleteModal: false, deleteUrl : '', data : null, deletingIndex: -1, isDeleted : false,

    }, 
    user: false, 
}, 
getters: {
    getCounter(state){
       return state.conuter
    }, 
    // getDeleteModalObj(state){
    //     return state.deleteModalObj
    // }
    

   

},

mutations: {
    changeTheCounter(state, data){
        state.conuter += data
    }, 
    // setDeleteModal(state, data){
    //     const deleteModalObj = {
    //         showDeleteModal: false, 
    //         deleteUrl : '', 
    //         data : null, 
    //         deletingIndex: -1, 
    //         isDeleted : data,
    //     }
    //     state.deleteModalObj = deleteModalObj
    // },
    // setDeletingModalObj(state, data){
    //     state.deleteModalObj = data
    // },
    // updateUser(state, data){
    //     state.user = data
    // },
}, 



actions :{
    changeCounterAction({commit}, data){
        commit('changeTheCounter', data)
    }
}

});

export default store;

but in my usecom.vue file comA counter not working and comA.vue enconted following error messege Property '$store' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps &

how to fix this problem here?