bug: vue, react, ion-slide crashes when tried to render dynamically

[JosePerez27]

Bug Report

Ionic version:

[ ] 4.x
[ ] 5.x
[x] 6.x

Current behavior:
I tried to render a dynamic sliders with a reactive data, in this case I'm simulating a HTTP request with settimeout, when i tried to fill the reactive variable, it turns in this error and the App crashes:

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Expected behavior:
Render correctly the sliders with the dynamic data that i fill with the HTTP Request.

Steps to reproduce:
Step 1: Create an Ion Page.
Step 2: Call the IonSlides, IonSlide components from @Ionic/vue.
Step 3: Create an empty reactive variable to fill in the future (HTTP Request)
Step 4: Try to render dynamically the sliders with the directive v-for.

Related code:

https://github.com/JosePerez27/slidebug.git , Branch master, src/views/Home.vue

<template>
    <ion-page>
        <ion-content>
            <!-- Content -->
            <div class="content">
                <ion-label>Content</ion-label>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi labore quis, illo, possimus dolorem et doloremque nostrum quae repellat minus tempora ea dolores? Eveniet nostrum provident, numquam quia molestiae sequi.</p>
            </div>

            <!-- Services slider cards -->
            <div class="services">
                <ion-label>Services</ion-label>
                <ion-slides pager="true" :options="slideOpts">
                    <!-- Here the app crahses -->
                    <ion-slide v-for="(service, index) in services" :key="index">
                        <ion-card>
                           {{ service.name }}
                        </ion-card>
                    </ion-slide>
                    <!-- Here the app crahses -->
                </ion-slides>
            </div>
        </ion-content>
    </ion-page>
</template>

Ionic info:

Ionic:

   Ionic CLI       : 6.12.4 (C:\Users\josea\AppData\Roaming\npm\node_modules\@ionic\cli)      
   Ionic Framework : @ionic/vue 5.5.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.7
   OS     : Windows 10

[JosePerez27]

Hi! There was any solution for this? I really need this functionality, Thanks!

[Suxsem]

I can confirm the same issue. Any workaround waiting for the proper fix?

[whitersun]

Hello there. Do you mean browser works fine, but after platform to devices, it doesn't work or the slider fired right?

[ivoevolution]

v-for not working on <ion-slide> element and crashes. I got the same issue.

[Yonier]

i'm getting the same issue with v-for on ion-slide

[KuschL]

The same error also occurs when the content is dynamically added to <IonCol> as first child in react. If I append children, it works.

Previously, I just didn't render the specific element when the data is changing. But the problem with <IonCol> worked in Ionic v5.