inertia: v-if causing "Unhandled error during execution of scheduler flush" after form.post

Versions:

• @inertiajs/inertia version: 0.8.7
• @inertiajs/inertia-vue3 version: 0.3.14
• vue version 3.0.11

Describe the problem:

When posting a form that updates a prop that is being used in a v-if something goes wrong.

Getting a warning with:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

Followed by an error:

TypeError: can’t access property “insertBefore”, parent is null

Steps to reproduce:

I’m using Laravel and Vue3. Here’s a component (Route/Index):

<template>
  <!-- here I have a layout component -->
    <form @submit.prevent="form.post(route('route.post'))">
      <button>Create thing</button>
    </form>
    <div v-if="someProp">
      {{ someProp }}
    </div>
   <!-- end of layout component -->
</template>
<script>
import { useForm } from '@inertiajs/inertia-vue3'
export default {
  props: {
    someProp: String
  }
  setup () {
    const form = useForm()
    return { form }
  },
}
</script>

Here’s the laravel controller methods:

public function index()
{
    return Inertia::render('Route/Index', [
        'someProp' => session()->get('propContent'),
    ]);
}

public function store()
{
    // do stuff
    $prop = 'Blabla';
    return redirect()->back()->with('propContent', $prop);
}

Workaround

As a workaround I’m adding { preserveState: false } to form.post and it works.