Vuetify v-card elevation doesn't show up, flat attribute does

Question

I'm trying to change the elevation of my v-cards in vuetify in my index.vue page but the changes dont show up, right now the code for my card reads: <v-card class="cards" elevation="0" shaped> but I tried it with class="elevation-0" as well. It doesn't work with any elevation but if I e.g. use the attribute: ``` the changes show up.
In my other pages the elevation attribute works (in my _slug.vue page), just in the index.vue page it doesn't. I also tried to change move the code of the cards to an own component but it doesn't work as well.

The Component in my index.vue file:

<template>
  <NuxtLink :to="'/' + Link">

    /* This is the card I'm talking about */
    <v-card class="cards" elevation="0" shaped>
      <img class="thumbnail" :src="Image" />
      <h3 class="video-title">{{ Title }}</h3>
      <h3 class="video-type">Most {{ Name }}:</h3>
    </v-card>
  </NuxtLink>
</template>
<script>
export default {
  name: "ThumbnailCard",
  props: {
    Image: String,
    Title: String,
    Link: String,
    Name: String,
  },
};
</script>
<style scoped>
.cards {
  margin-top: 15vh;
  margin-left: 1vw;
  margin-right: 1vw;
  height: 30vh;
  text-align: center;
}
.thumbnail {
  width: 100%;
  height: 30vh;
}
.video-type {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 9vh;
}
.video-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 18vh;
}
@media only screen and (max-width: 599px) {
  .cards {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 15vw;
    margin-right: 15vw;
    height: 14.5vh;
  }
  .thumbnail {
    height: 14.5vh;
  }
  .video-type {
    margin-top: 4vh;
  }
  .video-title {
    margin-top: 8vh;
  }
}
</style>

The whole code for my index.vue:

<template id="main">
  <div>
    <div id="title-section">
      <h1 id="title">Title</h1>
      <h2 id="description">This Site is awesome, have a look</h2>
    </div>
    <v-container id="content-wrapper">
      <v-row no-gutters>
        <v-col cols="12" sm="4">
          <ThumbnailCard
            :Image="recentImage"
            :Title="recentTitle"
            :Link="recentLink"
            Name="Recent"
          />
        </v-col>
        <v-col cols="12" sm="4">
          <ThumbnailCard
            :Image="popularImage"
            :Title="popularTitle"
            :Link="popularLink"
            Name="Popular"
          />
        </v-col>
        <v-col cols="12" sm="4">
          <ThumbnailCard
            :Image="relevantImage"
            :Title="relevantTitle"
            :Link="relevantLink"
            Name="Recent"
          />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import ThumbnailCard from "@/components/global/ThumbnailCard";

export default {
  name: "index",
  components: {
    ThumbnailCard: ThumbnailCard,
  },
  async asyncData({ $content, params }) {
    const articles = await $content("articles")
      .only(["date", "slug", "title", "img"])
      .fetch();
    const datesArr = articles.map((a) => {
      return new Date(a.date).getTime() / 1000;
    });
    const recentTitle = articles[datesArr.indexOf(Math.min(...datesArr))].title;
    const recentLink = articles[datesArr.indexOf(Math.min(...datesArr))].slug;
    const recentImage = articles[datesArr.indexOf(Math.min(...datesArr))].img;

    const popularTitle = articles[0].title;
    const popularLink = articles[0].slug;
    const popularImage = articles[0].img;

    const relevantTitle = articles[0].title;
    const relevantLink = articles[0].slug;
    const relevantImage = articles[0].img;

    return {
      recentTitle,
      recentLink,
      recentImage,
      popularTitle,
      popularLink,
      popularImage,
      relevantTitle,
      relevantLink,
      relevantImage,
    };
  },
};
</script>

<style>
html {
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
#title-section {
  background: black;
  width: 100%;
  height: 40vh;
  text-align: center;
}
#title {
  color: white;
  font-size: 4rem;
}
#description {
  color: white;
}
#content-wrapper {
  height: 60vh;
  width: 100%;
}
</style>

Answer 1

For anyone having the same problem: I forgot the <v-app> component which somehow resulted in the elevation attribute not working