Hi i have situation where css and scss is not applied of a component of 1 app into another app

I have 2 apps

1. core
2. plugins

i want to use the components of a core app into plugins app

here is how i'm doing

Core App

//main.js

import "bootstrap/dist/css/bootstrap.min.css";
const app1 = new Vue({
    render: h => h(App),
    ....
})

//core.component.vue

<template>
   .....
</template>
<script>
   export default{
       name:'CoreComponent',
       ....
    }
</script>
<styles lang="scss" scoped>
   $bgColor:red;   <--- these css are not applied when used in app 2
   ...             <--- these css are not applied when used in app 2
</styles>

Core provides component mappers for providing component when requested to plugins.

//core-component-mapper.js

export default{
  CoreComponent: require('path/CoreComponent.vue').default,
}

Below my plugins App setup

import "bootstrap/dist/css/bootstrap.min.css";
import CoreComponentMapper 'path/core-component-mapper.js'

const app2 = new Vue({
    render: h => h(App),
    components:{
      FirstCoreComp: CoreComponentMapper.CoreComponent,
    },
})

Note: please ignore any mistake in my demo code, code works perfectly in my setup except user defined css is not applied

Question: whichever css is defined on component of app 1 i,e core by me is not applied when used in App 2 i,e plugins

Note: i did not setup any webpack config i guess my both vue app is using default vue-loader config

Intresting thing is that bootstrap css works don't know why.(it is used in both the apps)

@MatJ as you asked in one of your comment i'm attaching screenshot (as per me css are not merged , but inline css are applied well)

Please help me thanks in advance!!