multi-item round tweak

NUXT/pages/mods/tweaks.vue

@@ -2,11 +2,43 @@
   <div class="d-flex flex-column justify-end" style="min-height: 100%">
     <v-card
       flat
-      class="px-6 ma-4 mt-2 background"
+      class="mb-4 background"
+      style="
+        transition-duration: 0.3s;
+        transition-property: border-radius;
+        overflow: hidden;
+      "
+      :style="{
+        borderRadius: `${roundTweak / 2}rem`,
+        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
+      }"
+    >
+      <div
+        v-for="item in list"
+        :key="item"
+        @click="list.pop(item)"
+        class="pa-4 mb-1 background text-center rounded-sm"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      >
+        {{ item }}
+      </div>
+      <v-card-title
+        v-ripple
+        class="pa-4 background primary--text text--lighten-2 rounded-sm"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        @click="list.push('x')"
+      >
+        +++++++++++++++++++++++++++++
+      </v-card-title>
+    </v-card>
+    <v-card
+      flat
+      class="px-6 background"
       style="transition-duration: 0.3s; transition-property: border-radius"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{
         borderRadius: `${roundTweak / 2}rem`,
+        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
       }"
     >
       <h3 class="mt-5">Rounded Corners</h3>
@@ -42,6 +74,9 @@
 
 <script>
 export default {
+  data: () => ({
+    list: ["x", "x"],
+  }),
   computed: {
     roundTweak: {
       get() {