How to add dynamic components/partials in Vue.js

Question

I need to add child components dynamically to a component based on user interaction. I looked to some old issue but it seems like a dirty hack to me, besides, it is an old issue

Answer 1

Hope this helps someone in future : There are numerous methods of doing this , below is one way of doing this :

1. If component is already defined , simply adding a new instance of component importantly using parent keyword to define parent of component instance as below : check codepen

var Child = Vue.extend({
    template: '
Hello!
',
});

new Vue({
  el: '#demo',
  ready: function() {
    var child = new Child({
        el: this.$el.querySelector('.child-host'),
        parent: this,
    });
  },
});