Exported Vue Web Component didnt uses boostrap

I have to create a vue web component for a large scale Webproject. And want to use it as a custom HTML-Element.
The Component and the Webproject uses Bootstrap for styling.
I import Bootstrap in the component and in the Main Webproject.

But when i build it and import the .js to my Main Project the component isnt bootstraped.

component.vue

<template>
  <div >
   <button type="button" class="btn btn-primary">weiter</button>
 
  </div>
</template>

<script>
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

export default {
  name: 'HelloWorld',

  props: {
    msg: String
  },
  
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

package.json

    {
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "web-component": "vue-cli-service build --inline-vue --target wc --name test-02",
    "web-async": "vue-cli-service build --name test-02 --target wc-async 'src/components/*.vue'"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.5.2",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}