vuetify transition of v-flex - vue.js

Question

I'm trying to implement transition like here codepen example but using the Vuetify.
I've noticed that adding transition tag before v-flex component destroyed a v-flex order. In this example codesandbox, there are two routes one with transition another one without.
Components have the structure:
<v-container>
<v-layout row wrap pb-2 pt-2>
<!-- is transition group -->
<transition-group name="cards" >
<v-flex xs3
v-for="card in items"
:key="card"
>
<v-layout>
<v-card>
.....
</v-card>
</v-layout>
</v-flex>
</transition-group>
</v-layout>
</v-container>

Answer 1

transition-group renders an actual element: a <span> by default. So there's an extra span between v-layout and v-flex. This cause the flexbox to malfunction.
transition-group has to render something. You could set it to render v-layout instead of span.
BUT, transition-group has a limitation. It can set tag but cannot set props. So, for the row wrap pb-2 pt-2, you gotta add it manually using CSS.
change
<template>
...
<v-layout row wrap pb-2 pt-2>
<transition-group name="cards">
...
</transition-group>
</v-layout>
...
</template>
to
<template>
...
<transition-group name="cards" tag="v-layout" class="manual-v-layout">
...
</transition-group>
...
</template>
<style>
.manual-v-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding-bottom: 8px !important;
padding-top: 8px !important;
}
</style>
and it would work.
Demo: https://codesandbox.io/s/z2z5yoopol

Answer 2

I couldn't get Jacob Goh's answer to work, so i made some adjustments with his answer as inspiration and came up with this as the solution.
<template>
...
<transition-group name="cards" tag="div" class="layout row wrap">
...
</transition-group>
...
</template>
Set the transition-group tag to div and assign the appropriate classes to it.