Here's a working example:
https://codesandbox.io/s/nervous-dew-kjb4ts

Step 1

Make a modal - see example.

We can use slots to put dynamic content, like other components in each instance of the modal, and named slots for multiple sections. We will control visibility in the outer component / the mixin.

<template>
  <transition name="modal">
    <div class="modal-header">
      <slot name="header"> default header </slot>
    </div>

    <div class="modal-body">
      <slot name="body"> default body </slot>
    </div>
    <slot name="footer">
      Default Footer
      <button class="modal-default-button" @click="$emit('close')">
       Close
      </button>
    </slot>
  </transition>
</template>

<script>
export default {
  name: "Modal",
};
</script>

<style scoped>
// See link above for full styles
</style>

Step 2

Create a mixin that all components containing a modal can extend from. Here we'll put methods for opening, closing and anything else you need. Create a data attribute to indicate modal state for use with v-if, then add two methods for opening and closing.

import Modal from "@/components/Modal";

export default {
  components: {
    Modal
  },
  data: () => ({
    modalState: false
  }),
  methods: {
    openModal() {
      this.modalState = true;
    },
    closeModal() {
      this.modalState = false;
    },
  },
};

Step 3

Create your components, that extend from the mixin, and use the modal component with whatever content you like.

You can trigger right-clicks using: @mouseup.right

<template>
  <div class="example-component comp1">
    <h2>Component 1</h2>
    <button @contextmenu.prevent
      @mouseup.right="openModal()"
      @click="tryRightClick()">
      Open Component 1 Modal
    </button>
    <Modal v-if="modalState" @close="closeModal()">
      <template v-slot:header> Component 1 Modal</template>
      <template v-slot:body>
        Lorem ipsum 
      </template>
    </Modal>
  </div>
</template>

<script>
import modalMixin from "@/mixins/component-modal-mixin";

export default {
  mixins: [modalMixin],
};
</script>

Step 4

Finally, just import your components.

<template>
  <div id="app">
    <h3>StackOverflow Answer for Terbah Dorian</h3>
    <i>Example of separate components opening separate modals</i>
    <Component1 />
    <Component2 />
    <Component3 />
  </div>
</template>

<script>
import Component1 from "@/components/Component1";
import Component2 from "@/components/Component2";
import Component3 from "@/components/Component3";

export default {
  name: "App",
  components: {
    Component1,
    Component2,
    Component3,
  },
};
</script>

Hope that helps :) If it did, then an upvote would be appreciated!