How to add emit information to a component dynamically generated using Vue.extent()?

I'm dynamically generating instances of my child component "Action.vue" using Vue.extent() this way:

let ActionClass = Vue.extend(Action)
let ActionInstance = new ActionClass({
  store
})
ActionInstance.$mount()
this.$refs.actions.appendChild(ActionInstance.$el)

This works fine. However, besides access to the store, child component also needs to emit an event (in response to user interaction with one of its elements) for the parent component to execute a method.

How to achieve this?

You can use instance.$on method to add eventListenersdynamically :

Consumer

import Dummy from "./Dummy.vue";
import Vue from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    mount: function() {
      const DummyClass = Vue.extend(Dummy);
      const store = { data: "some data" };
      const instance = new DummyClass({ store });
      instance.$mount();
      instance.$on("dummyEvent", e => console.log("dummy get fired", e));
      this.$refs.actions.appendChild(instance.$el);
    }
  }
};

Child component

export default {
  methods: {
    fire: function() {
      console.log("fired");
      this.$emit("dummyEvent", { data: "dummyData" });
    }
  }
};

Here is the Sandbox