Resolved: How to add multiple components dynamically at run time not globally but locally

<template>
    <div>
       <component v-if="currentComponent" :is="currentComponent">
                 
        </component>
    </div>
</template>
<script>

import Vue from 'vue';

export default {
    data(){
      return{
        currentComponent:null,
      }
    },
    methods:{
        load(e){
              for(let key in e.components){
                   Vue.component(key,e.components[key]);
               }
              this.$nextTick(() =>{
                   this.currentComponent = e.components.container;
              });
        },
    },

   created(){
       document.body.addEventListener('component-ready',this.load, false);
   },

}
</script>

components:{
   container: component Object{},
   header: component Object{},
   body: component Object {},
   footer: component Object {},
}

  const event = new Event('component-ready');
  event.components = {
    container: component Object{},
    header: component Object{},
    body: component Object {},
    footer: component Object {},
   };
  document.body.dispatchEvent(event);

export default {
  methods: {
    load(e) {
      this.$options.components = e.components 

      this.$nextTick(() => {
        this.currentComponent = e.components.container
      })
    },
  },
}