Как подключить в vuetify компонент его же css, чтобы он влиял только на сам компонент, а не на внешний html?

Здравствуйте.
Подскажите, пожалуйста, решение проблемы.

Ситуация:
Разрабатываю компонент при помощи vue + vuetify, который должен быть включен в legacy html страницу. Возникла сложность с подключением css самого vuetify в этот компонент.

Что я попробовал сделать:

Вариант 1.
css добавляется в плагине при помощи строчки:
import 'vuetify/src/stylus/app.styl'
В корневом шаблоне используется элемент , вот так:

<template>
  <v-app>
    <h2>Test</h2>
    <v-layout row>
      <v-btn color="red">TestButton</v-btn>
      <v-btn color="primary">TestButton2</v-btn>
    </v-layout>
  </v-app>
</template>

Проблема с этим вариантом: css влияет на всю html страницу, в которую включен компонент, элемент v-app превращается в блок высотой во всю страницу, а нужно, чтобы он занимал высоту внутренних элементов.

Вариант 2: теоретически, если к компоненту применить
<style scoped></style>,
то стиль применится только к компоненту, но на самом деле эффект такой же как и в первом варианте:
что в этом варианте было сделано:
комментируем строку подключения стилей в плагине:
//import 'vuetify/src/stylus/app.styl'
в комоненте добавляем тег style scoped, чтобы получилось вот так:

<style scoped>
@import url('../node_modules/vuetify/dist/vuetify.min.css');
</style>

<template>
  <v-app>
    <h2>Test</h2>
    <v-layout row>
      <v-btn color="red">TestButton</v-btn>
      <v-btn color="primary">TestButton2</v-btn>
    </v-layout>
  </v-app>
</template>

Соответственно, вопрос, как все же нужно сделать так, чтобы достичь желаемого результата:
vuetify компонент встраивается в существующую html страницу, в которой много другого html кода и который должен по высоте занимать ровно столько, сколько он сам занимает (или как-то ограничить по высоте v-app).

Спасибо за внимание.