On `Inertia.get()`: HTMLDivElement object could not be cloned.

Versions:

@inertiajs/inertia version: 0.11.1
@inertiajs/inertia-vue3 version: 0.6.0

Describe the problem:

I'm trying to replicate the behavior shown here https://github.com/JeffreyWay/Build-Modern-Laravel-Apps-With-Inertia/commit/d601c578bbfd932243016fe01510c889027a6b60?diff=split.

I want to make a Inertia.get() request to the current page passing the updated value. Instead I get the following warning and error in the [Firefox] browser console. Further more no requests are ever made.

[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/core Uncaught (in promise) DOMException: HTMLDivElement object could not be cloned. router.ts:402:4

Chrome is also failing with a bit different error message: DOMException: Failed to execute 'replaceState' on 'History': HTMLDivElement object could not be cloned..

Steps to reproduce:

I'm starting of Laravel Jetstream preset for Vue & Inertia. But I'm sure that you could simply replicate by using any existing project and rendering this SFC:

Ensure Vue3, Inertia, TomSelect are installed.

<script setup>
import TomSelect from 'tom-select/dist/esm/tom-select';
import 'tom-select/dist/css/tom-select.min.css';
import { onMounted, ref, watch } from 'vue';
import { Inertia } from '@inertiajs/inertia';

let family = ref({
    name: '',
    key: '',
});
onMounted(() => {
    new TomSelect('[data-products]', {
        hideSelected: true,
        options: [{ text: 'value', value: 'value' }],
        onItemAdd: (v, i) => {
            family.value = {
                name: i.textContent,
                key: v,
            };
        },
    });
});

watch(family, (value) => {
    console.log(value);
    Inertia.get(window.location.href, value, {
        // preserveState: true, //toggling these have no impact
        // preserveScroll: true,
        // replace: true,
    });
});
</script>

<template>
    <h1 class="text-3xl">
        {{ family.name }}
    </h1>
    <h2>Color Picker Filter: {{ family.key }}</h2>

    <select
        class="select select-bordered w-full"
        data-products
        placeholder="Select product"
    ></select>
</template>

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

inertiajs / inertia