Of these two similar JSFiddles (using Vue.js (2.6.11) and Vuetify (2.4.0)), why does the v-card display properly in one of them, but not the other?

Question

Hello to everyone who's reading this. :)

My question is: Of these two similar JSFiddles (using Vue.js (2.6.11) and Vuetify (2.4.0)), why does the v-card display properly in one of them, but not the other?

JSFiddle #1: https://jsfiddle.net/omLungap/5/

<div id="app">
  <v-card>
      <v-card-text>
        <span v-for="i in 10" :key="i">
          {{ message }}
          <br>
        </span>
      </v-card-text>
  </v-card>
</div>

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  data: {
    message: "Hello, world!"
  }
});

JSFiddle #2: https://jsfiddle.net/j5e0f86o/3/

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="app">
  <v-card>
      <v-card-text>
        <span v-for="i in 10" :key="i">
          {{ message }}
          <br>
        </span>
      </v-card-text>
  </v-card>
</div>

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  data: {
    message: "Hello, world!"
  }
});

Any input would be greatly appreciated!

Answer 1

The second fiddle does not load stylesheets. If you add

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>

they look pretty much the same (they use different Vuetify versions, so they look slightly different)