fix widths of slider

assets/js/Stepper.vue

@@ -1,10 +1,11 @@
 <template>
     <form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto max-w-[960px]" @submit.prevent="submit">
-        <carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" class="">
+        <carousel v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false" ref="carousel">
             <slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                 <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
-                <radio-grid id="category" v-model="value.category" :options="categories"></radio-grid>
+                <radio-grid id="category" :modelValue="value.category" @update:modelValue="onUpdateCategory"
+                    :options="categories"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
                 </pagination>
             </slide>
@@ -198,6 +199,7 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
 import Heading from './components/Heading.vue';
 import VSlider from './components/VSlider.vue';
 import 'nouislider/distribute/nouislider.min.css';
@@ -334,9 +336,11 @@ export default {
         }
     },
     methods: {
-        setCategoryId(id) {
-            this.value.category = id;
-            this.innerStep++;
+        onUpdateCategory(categoryId) {
+            this.value.category = categoryId;
+            nextTick(() => {
+                this.$refs.carousel.updateSlideWidth();
+            });
         },
         back() {
             this.innerStep--;