[Vuejs]-How would I apply classes to elements that are generated through a loop?

To add a class to the generated list elements, you can use :class="someClassName" like this:

<li v-for="card in cardID" :key="card" :class="someClassName">
    <app-profile class="profile" :id="cardID[i++]"></app-profile>
</li>

And you don’t need to wrap a div around the list elements to center them. Just add the center styles to the parent <ul> element instead.