How to setup a singleton store/event bus for micro front ends monorepo with Vue2, Vuex, Vite?

I have this structure which every feature will be treated as a mini app, they will be bundle as separated scripts (based on vite-feature.config) to ready for load as needed on an external app. They will be served as(MFEs), so they each have their own instance when importing services.

However, I would like to set up a shared store/eventBus that can be used across features.

The use case is, featureA(mfe) will emit event or dispatch action to update state, and then the featureB (other mfe) will be received this event/ an updated state.

src
├─features
│  ├ featureA
│  │  └index.js
│  ├ featureB
│  │  ├ index.js
│  │  └ index.vue
├─stores
│  └ index.js
├─utils
│  └ eventBus.js
├─App.vue
├─main.js
vite-config.js
vite-feature.config.js

this is the build config for feature

const config = {
      ....
      build: {
        minify: false,
        lib: {
          entry: resolve(__dirname, feature.path),
          name: feature.key,
          fileName: "index",
          formats: ["es"],
        },
        outDir: `public/feature/${feature.key}`,
 
      },
    };

vite config

plugins: [vue()],
  build: {
    manifest: true,
    emptyOutDir: true,
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
      },
    },
  },

featureB index.js enter image description here

featureA index.js enter image description here

I have used window to work around with event emiting, but I dont want to set a state with window object and that seems not a suitable approach for mfe communication.

Any suggestion will be appriciated. Thanks.