title: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug
body: <p>I am getting the following error while creating slides in Vue.js:</p>
  <pre><code>[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
    at &lt;Anonymous key=1 &gt; 
    at &lt;Anonymous pager=&quot;true&quot; options= {initialSlide: 1, speed: 400} &gt; 
    at &lt;Anonymous fullscreen=true &gt; 
    at &lt;IonPage isInOutlet=true registerIonPage=fn&lt;registerIonPage&gt; &gt; 
    at &lt;Product Details ref=Ref&lt; Proxy {…} &gt; key=&quot;/products/1&quot; isInOutlet=true  ... &gt; 
    at &lt;IonRouterOutlet&gt; 
    at &lt;IonApp&gt; 
    at &lt;App&gt;
  </code></pre>
  <pre><code>Uncaught (in promise) 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.
      at insert (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:222:16)
      at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3958:9)
      at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
      at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
      at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4312:21)
      at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
      at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
      at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
      at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
      at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)
  </code></pre>
  <p>If I add the slides hard coded it does not show any errors. But if I add the slides dynamically using a <code>v-for</code> loop then it shows the above errors.</p>
  <p>I have added the slides in following way:</p>
  <p>This is the template:</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;ion-slides pager=&quot;true&quot; :options=&quot;slideOpts&quot;&gt;
      &lt;ion-slide v-for=&quot;image in product.product_images&quot; v-bind:key=&quot;image.id&quot;&gt;
        &lt;h1&gt;Slide 1&lt;/h1&gt;
      &lt;/ion-slide&gt;
    &lt;/ion-slides&gt;
  </code></pre>
  <p>This is the script:</p>
  <pre class="lang-js prettyprint-override"><code>export default {
    name: &quot;Product Details&quot;,
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
      IonSlides,
      IonSlide,
    },
    data() {
      return {
        product: {},
      };
    },
    setup() {
      // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
      const slideOpts = {
        initialSlide: 1,
        speed: 400,
      };
      return { slideOpts };
    },
    mounted: function () {
      fetch(&quot;http://localhost:4000/api/products/&quot; + this.$route.params.id, {
        method: &quot;get&quot;,
      })
        .then((response) =&gt; {
          return response.json();
        })
        .then((jsonData) =&gt; {
          this.product = jsonData;
          // console.log(jsonData.product_images);
        });
    },
  };
  </code></pre>
  <p>What am I doing wrong in the code?</p>