Vue.js Vuetify呈现标记而不是类名

我使用的是vuetify的v卡，但我意识到，当我使用相同的标记时，我的“v-list-item”呈现方式与代码笔中的示例不同。一些CSS样式也没有遵循。有人经历过吗

<v-card
  class="mx-auto"
  max-width="344"
  outlined
>
  <v-list-item three-line>
    <v-list-item-content>
      <div class="overline mb-4">OVERLINE</div>
      <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
      <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
    </v-list-item-content>

    <v-list-item-avatar
      tile
      size="80"
      color="grey"
    ></v-list-item-avatar>
  </v-list-item>

  <v-card-actions>
    <v-btn text>Button</v-btn>
    <v-btn text>Button</v-btn>
  </v-card-actions>
</v-card>  

上划线
标题5
灰狗冷冷地亲切地打招呼
按钮
按钮

---

尝试将列表项包装到父v-list组件中

上划线
标题5
灰狗冷冷地亲切地打招呼
按钮
按钮

但它所做的只是为区块增加利润

---

请更新你的钢笔。它是空的。

您的代码笔路径错误。您是否使用与示例相同版本的Vuetify？您没有看到关于未知自定义元素的控制台警告吗？