Vue-js-modal: Can not listen on custom events from the dynamically created modal

[paulgeisler]

Problem:

Can not listen on custom events from the dynamically created modal.

Example & screenshots:

Vue.use(VModal, { dynamic: true, injectModalsContainer: true })

import ModalAccountDeletion from '../components/modal_account_deletion'
// which has a button emiting 'account-delete-confirm' event (i can see it in dev tools)

this.$modal.show(ModalAccountDeletion, {},
          {
            name: 'account-deletion',
            clickToClose: false,
          },
          {
            'before-close': (event) => {
              console.log('this will be called before the modal closes')
            },
            'account-delete-confirm': (event) => {
               console.log('DO IT!')   //DEBUG
            },
            'account-delete-cancel': (event) => {
              console.log('Cancel!!!!')   //DEBUG
            }
        })

But!

before-close is called as expected by emiting 'close' from the same button.
Using <modals-container @account-delete-confirm='confirmedFunction' /> works too.

EDIT:

Found out that emiting event with this.$parent.$emit('account-delete-confirm')works but it's ranked as bad practice. It would be great to let the events through the 'middle layer' VueJsModal. The hierarchy is currently like Anonymous Component > VueJsModal > ModalAccountDeletion.

[euvl]

Please use global event bus instead