Not working imported js file in Laravel + Vue js project

I have imported common.js file in the app.js file in Laravel + Vue Js project. using Vue 3 as well. app.js

require('./bootstrap');
import router from './router'
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import common from './common'
//Vue.mixin(common)


createApp({
    components: {
        mainapp,
    }
    
}).use(router).use(ViewUIPlus).use(common).mount('#app');

common.js

export default {
    data(){
        return {

        }
    },

    methods: {
        async callApi(method, url, dataObj ){
            try {
              return await  axios({
                    method: method,
                    url: url,
                    data: dataObj
                });
                
            } catch (e) {
                
                return e.response
                
            }

        }
            
        },
}

tags.vue

<template>
<div>
         <h1>Hi</h1>
</div>

</template>
<script>
export default {
    async created(){
        const res = await this.callApi('post', '/app/create_tag', {tagName: 'testtag'});
        console.log(res)
        if(res.status==200){
            console.log(res)
        }
    }
}
</script>

My problem is this I am unable to call axios api call with my tags.vue file as well. I think it may be some problem with impoting common.js file in app.js because I dont know is this way correct in vue 3 as well. I have read some article //Vue.mixin(common) not using in vue 3 (but I dont know correctly). if you have some idea please give me some instruction.