Vuetify's v-container arranging v-rows horizontally - node.js

Question

I am working in a personal project in which I am using Vue+Vuetify. In one view I'm going to have an image logo and, bellow it, a Drag&Drop area. For this I started testing the grid system (Vuetify 2.X), which is giving me a bit of a headache.
For testing I used this code that is referenced in the Vuetify's documentation website about the Grid system:
<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>
The result of this code should look like this:
From the documentation and this example, I understand that the v-container acts as a package that holds the v-rows, which are the ones that have the v-cols that are the ones with the information to display. The v-container will arrange the v-rows vertically, while the v-rows will do it horizontally to the v-cols. In summary: the v-container is the foundation for a matrix-like structure, in which the combination of v-rows with v-cols are the tiles of the matrix.
With this all said, using the same code in my view I get this:
Here the v-container seems to be arrnaging the v-rows horizontally instead, and not even centered.
Is this normal? Did I miss an option or maybe the problem is comming from outside the view?
Thank you for your time.