emitter 오류

main.js

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";
let emitter = mitt;
let app = createApp(App);
app.config.globalProperties.emitter = emitter;
app.mount("#app");

FilterBox.vue

<div @click="fire" :class= "'${filter} filter-item'" :style="'background-image : url(${url})'">
 

<script>
export default {
    name: 'filterbox',
    props: {
        url: String,
        filter: String,
    },
    methods: {
        fire(){
            this.emitter.emit('박스클릭함',this.filter)
            console.log('fire')
        }
    }
}
</script>

라고 작성하였는데 console.log에는

Uncaught TypeError: this.emitter.emit is not a function 라고만 나옵니다..어디가 문제 일까요?