Unhandled error during execution of scheduler flush this is likely a vue internals bug

Arguably, the error message could be improved on this one.

The error was caused by trying to iterate through a non-iterable (in your case undefined), using v-for. Specifically, before the call made in mount() returns, product.product_images is undefined, because you initiate product as empty object.

Vue 2 style solutions

• instantiate product.product_image as iterable:

//...
  data: () => ({ 
    product: { product_images: [] }
  })

or provide an empty array as fallback in template:

<ion-slide v-for="image in product.product_images || []" v-bind:key="image.id">
  <h1>Slide 1</h1>
</ion-slide> 

or place a v-if on the parent of the v-for:

<ion-slides pager="true" :options="slideOpts" v-if="product.product_images">
  ...
</ion-slides>

Vue 3 style solution

Make the entire ProductDetails component suspensibe, by giving it an async setup function. In the setup function, make the call to get the product.
Proof of concept:

//...
async setup() {
  const product = await fetch("http://localhost:4000/api/products/" + 
    this.$route.params.id, {
      method: "get",
    }).then(r => r.json());
  return { product }
}

Now place <product-details> into a <Suspense>‘s <template #default>, providing a fallback template (which will be rendered while <Suspense> resolves all the async components found in its default template):

<Suspense>
  <template #default>
    <product-details></product-details>
  </template>
  <template #fallback>
    Product is loading...
  </template>
</Suspense>

The beauty (and elegance) of using <Suspense> is that the parent doesn’t need to know the actual condition(s) for which the markup is not yet to be rendered. It simply waits for all suspensible components to resolve.
In short, using <Suspense> you no longer need to hardcode the rendering logic into the template using v-ifs and specifying the condition in clear, on the wrapper. Each async child component contains its own condition and all it announces to the parent is: i’m done. When all are done, they’re rendered.

runtime-core.esm-bundler.js:38 [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 <SelectDialog list= (3) ["One", "Two", "Three"] > 
  at <App>
warn @ runtime-core.esm-bundler.js:38

logError @ runtime-core.esm-bundler.js:211
handleError @ runtime-core.esm-bundler.js:203
callWithErrorHandling @ runtime-core.esm-bundler.js:157
flushJobs @ runtime-core.esm-bundler.js:384
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:286
queueJob @ runtime-core.esm-bundler.js:280
run @ reactivity.esm-bundler.js:183
trigger @ reactivity.esm-bundler.js:189
set @ reactivity.esm-bundler.js:292
set @ runtime-core.esm-bundler.js:6219
onClick @ SelectDialog.vue:12
callWithErrorHandling @ runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:163
invoker @ runtime-dom.esm-bundler.js:308
runtime-dom.esm-bundler.js:175 Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at patchAttr (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:6789:10)
    at patchProp (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:6931:9)
    at patchProps (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4319:11)
    at patchElement (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4257:9)
    at processElement (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4156:7)
    at patch (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4088:11)
    at patchBlockChildren (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4308:7)
    at patchElement (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4289:7)
    at processElement (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4156:7)
    at patch (http://localhost:3000/node_modules/.vite/vue.js?v=2c2f4f03:4088:11)

I think this problem stems from a parent template having multiple children in Vue.js 3 with Vue Router 4. I never had this problem in prior version of both packages.

I have a simple App.vue file:

<template>
    <div id="app">
         <main id="content">
                    <div id="nav">
                        <!--<router-link to="/about">About</router-link>-->
                        <router-link to="/information">Information</router-link>
                        <router-link :to="{ path: '/create', name: 'PostCreate'}">Create</router-link>
                    </div>
                    <router-view></router-view>
         </main>
</template>

The router-link to="/information" link works fine. It just loads the view which has no other components inside it.

The other router-link :to="{ path: '/create', name: 'PostCreate'}" fails after repeatedly trying to load the component about 50 times and logs this in the console:

 [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 <PostCreate> 
  at <PostCreate>  
  at <PostCreate>  
  ... // repeats over and over again until
  at <PostCreate onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App> 
  at <App>

vuerouter.js

const routes = [
    {
        path: '/',
        name: 'HomeView',
        component: HomeView
    },
    {
        path: '/information',
        name: 'Information',
        component: () => import(/* webpackChunkName: "Information" */ '../views/information/Information.vue')
    }
    ,
    {
        path: '/create',
        name: 'PostCreate',
        component: () => import(/* webpackChunkName: "Create" */ '../views/posts/PostCreate.vue')
    }
];

The only difference between Information.vue and PostCreate.vue is that the latter imports another vue component to make a form for the user to create a post.

Information.vue

<template>
<div>
<p>I am full of good info</p>
</div>
</template>
<script>
    export default {
        name: 'Information'
    }
</script>

PostCreate.vue

<template>
    <div class="content">

            <h1>I make a form</h1>
            <Post-Create></Post-Create>

    </div>
</template>

<script>
    import PostCreate from "../../components/PostCreate.vue";

    export default {
        name: "PostCreate",
        components: {
            "Post-Create": PostCreate
        }
    }
</script>

Why is this an issue in Vue.js 3 with Vue-Router 4 whereas it worked fine previously? How do I solve it?