How to make Vuetify web components render correctly?

Question

Vue.js

Created this Bt.vue web component

<template>
  <div style="border:1px solid red">
    <div>
      <v-btn depressed small color="primary">Primary</v-btn>
    </div>
    <div>
      <v-btn depressed small color="error">Error</v-btn>
    </div>
  </div>	
  </template>

<script>
  export default {
  }
</script>

Compiling it

npx vue-cli-service build --target wc --name shasoft "src/components/*.vue"

and display on the page as

<shasoft-bt></shasoft-bt>
    <div>
      <v-btn depressed small color="error">Ошибка</v-btn>
    </div>

But it is displayed in this form:

and this is how it looks

. the button that is displayed directly on the page - everything is ok with it. And the button that is in the component - it is displayed crookedly. I understand that there is not enough CSS, but how can I make this CSS come from the main page?