[ Vue ] $emit from dynamic component?

Question

Vue.js

We mount the component directly in the DOM:

toogleForm () {
      const Tbody = document.querySelector('tbody')
      const AddNewRowCtor = Vue.extend(AddNewRow)
      const addNewRowCtorInstance = new AddNewRowCtor().$mount()
      Tbody.insertBefore(addNewRowCtorInstance.$el, Tbody.querySelector('tr'))
    },

We are trying to trigger an event from this component:

emitRow () {
      console.log('test')
      this.$emit('addResource', {
        name: 'Test',
        identifier: 'Test'
      })
    }

Nothing happens, the event is not fired, just the standard click. How to be?
Thank you.

Answer 1

Where did you sign up for the event?

toogleForm () {
      const Tbody = document.querySelector('tbody')
      const AddNewRowCtor = Vue.extend(AddNewRow)
      const addNewRowCtorInstance = new AddNewRowCtor().$mount()
      addNewRowCtorInstance.$on('addResource', payload => { /* wow! */ });
      Tbody.insertBefore(addNewRowCtorInstance.$el, Tbody.querySelector('tr'))
    },