How to ship a vue component with associated vuex and css with it so that i can use it in different project

Question

Hi i have 2 projects one is core and another is plugins [both project have its own folder and package.js] my intention is plugin must work without compiling from core independently.

Project structure: only rendered view not folders

<core project> <!-- core project or project 1 -->
   <iframe src="plugin/dist/index.html"> <!-- plugins project or project 2 -->
<core project>

Now i'm in such a situation where i need to completely port css and vuex store into plugin

Here is how i'm setting core component into loaded body object so that it can be used in plugins

let coreComp1 = import('/path');
parent.document.components = coreComp1; // similar to jquery $('body').data('components',coreComp1)

now in plugins i can access like this

<compx></compx>
...
{
components:{
  compx: ()=> parent.document.components //<-- observe this line
}
}

Now component of core render correctly without css and vuex methods

vuex methods in my core component is like shown below

 {
   methods:{
      doAssetUpdate(){
         this.updateAssets().then(...)  <!-- **getting error:** Cannot read properties of undefined -->
      },
      ...mapActions("assets", ["updateAssets"]),
   }
 }

Question: keeping above scenario in mind how to ship component with used vuex and css with it.

Please help me thanks in advance !!