Vuetifyのグリッドシステムについて

Question

Nuxt.jsにてVuetifyのグリッドシステムを公式のドキュメント通りに実装しようと思いましたがサンプル通りの挙動になりませんでした．
Vuetify - grids

//index.vue
<template>
  <v-container class="grey lighten-5">
    <v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
      <v-col v-for="k in n + 1" :key="k">
        <v-card class="pa-2" outlined tile> {{ k }} of {{ n + 1 }} </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

//default.vue
<template>
  <v-app>
    <Nuxt />
  </v-app>
</template>

こちら実行結果です．
![
確認したところv-containerにdisplay:flexが付いているため子要素であるv-rowが横並びのようになっているようですが，サンプルではこのようにならないのはなぜでしょうか．

Answer 1

自分で宣言したクラスが影響していました．