inertia: Error when updating the list on consecutive page reload

Versions:

• @inertiajs/inertia version: 0.8.6
• @inertiajs/inertia-vue3 version: 0.3.12
• inertiajs/inertia-laravel version 0.3.6

Describe the problem:

I’ve a checkbox on the page and a watcher that reloads the page with filtered data based on it’s value, I’m getting following error when Inertia reloads the page second time and element list in the DOM is being updated:

app.js:12889 Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null
    at insert (app.js:12889)
    at mountElement (app.js:9604)
    at processElement (app.js:9545)
    at patch (app.js:9465)
    at patchKeyedChildren (app.js:10210)
    at patchChildren (app.js:10093)
    at processFragment (app.js:9839)
    at patch (app.js:9461)
    at patchKeyedChildren (app.js:10174)
    at patchChildren (app.js:10117)

Steps to reproduce:

1. Have a page with it’s content wrapped within layout component. (Using persistent layout fixes the problem)
2. Have an element that that triggers page reload with new data based on some property
3. Have a deeply nested list of data with v-for loop. (Moving the loop one level up in my example fixes the problem). I’ve tried keying element by object id (in my real app) , by index or just by numeric value but that does not help.
4. Trigger page reload several times. (In my example error occurs on second reload) That’s my test component recreated in new Laravel Breeze with Inertia template - resources/js/Pages/Welcome.vue

 <template>
  <guest>
      <div>
          <div class="mt-2 text-right">
              <label class="inline-flex items-center leading-none">
                  <input v-model="checkBox" type="checkbox" class="mr-2" />
                  <span>Test checkbox</span>
              </label>
          </div>
          <div>
              <div v-for="value in someData" :key="value">
                  {{value}}
              </div>
          </div>
      </div>
  </guest>
  </template>
  
  <script>
      import Guest from "../Layouts/Guest";
      import {ref, watch} from "vue";
      import { Inertia } from '@inertiajs/inertia';
      export default {
          components: {Guest},
          props: {
              someData: {
                  type: Array,
                  required: true,
              }
          },
          setup() {
              const checkBox = ref(false);
              watch(checkBox, (value) => {
                  Inertia.reload({ data: { test: value ? 1 : 0 } });
              });
              return {checkBox}
          }
      }
  </script>

That is the test route I’m using:

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'someData' => request()->input('test') === '1' ? [1, 2, 3] : [1, 2, 3, 4, 5, 6],
    ]);
});

Demo repository: https://github.com/bakanyaka/inertia-vue-bug