How to insert the desired component into the modal window in Vue?

Question

JavaScript

Hello!
There is such a modal window component

<template lang="pug">
  div(class="modal__wrap" :class="[selectedComponent ? 'visible' : false]" @click="selectedComponent = ''")
    div(class="modal")
      div(class="modal__close" @click="selectedComponent = ''")
      div {{ selectedComponent }}
      component(:is="selectedComponent")
</template>

<script>
import { eventBus } from '@/main'
import WhoAreYou from './WhoAreYou.vue'
import SearchingControl from './SearchingControl.vue'
export default {
  data () {
    return {
      isShow: false,
      selectedComponent: ''
    }
  },
  components: {
    WhoAreYou,
    SearchingControl
  },
  created () {
    eventBus.$on('ShowComponent', (component) => {
      // this.isShow = val
      this.selectedComponent = component
    })
  }
}
</script>

there is such a component of the custom "input"

<template lang="pug">
  app-modal  
    ul.signup-control
      li
        div(id="male" class="radio" @click="chooseGender('Мужчина')" :class="[value==='Мужчина' ? 'active' : false]") 
        span Мужчина
      li
        div(id="female" class="radio" @click="chooseGender('Женщина')" :class="[value==='Женщина' ? 'active' : false]")
        span Женщина
</template>

<script>
import Modal from './Modal.vue'

export default {
  props: ['value'],
  components: {
    appModal: Modal
  },
  methods: {
    chooseGender (gender) {
      this.$emit('input', gender)
    }
  }
}
</script>

in the parent component, I monitor the state of the custom input

form.sign-up__form
        div.sign-up__form-field
          label(class="sign-up__label" @click.prevent="passControl('WhoAreYou')") {{ gender }}
          who-are-you(v-model="gender")
import { eventBus } from '@/main'
import WhoAreYou from '../components/WhoAreYou.vue'
import SearchingControl from '../components/SearchingControl.vue'
import Modal from '../components/Modal.vue'
export default {
  data () {
    return {
      gender: 'Я',
      iSearch: 'Ищу',
      selectedControl: 'WhoAreYou'
    }
  },
  components: {
    WhoAreYou,
    appModal: Modal,
    SearchingControl
  },
  methods: {
    passControl (control) {
      eventBus.$emit('ShowComponent', control)
      // this.selectedControl = control
    },
    openControl () {
      eventBus.$emit('ShowControl', true)
    }
  }
}
</script>

The question is how can I pass the desired component to the modal window, while so that in the parent I know what I have chosen?
At that implementation that now the modal window is empty. text () instead of it,
although it is clear that the name of the component is transferred

Answer 1

Maybe I didn’t understand everything, but some strange use... It’s
not easier to insert a slot into the modal window template and pass the necessary content there:

<template> // modal template
<div>
<slot></slot>
</div>
</template>

In parent:

<template>
<modal>
  <custom-input></custom-input>
</modal>
</template>

Answer 2

How do you keep track of input status? It creates an 'input' event for you, but you don't catch it anywhere in the parent (eventBus.$on('input', ...), or I'm missing something from the phone.