Scroll position not preserved on elements with scroll-region inside Vue templates

[ipimpat]

Versions:

• @inertiajs/inertia version: 0.10.1
• @inertiajs/inertia-vue3 version: 0.5.2
• inertiajs/inertia-laravel version: 0.5.4

Describe the problem:

I'm trying to have the scroll position preserved on a side menu, when certain navigation links are clicked inside the menu.

But I have problem with scroll position not being preserved on scrollable elements with the scroll-region attribute, if they are inside the Vue template / component.

But when placing elements outside Vue, in my Laravel view, the scroll position is preserved as expected.

Steps to reproduce:

Placing the scrollable element inside Vue <template> tag does not work:

js/Pages/MyVuePage.vue

<template>
    <div id="test1" style="height:250px; border: 1px solid red; overflow-y: auto; margin: 50px" scroll-region>
        <div style="height:300px; border: 1px solid yellow; margin: 50px">
        </div>
    </div>

    <Link href="http://localhost/" preserve-scroll>Foo Bar</Link>
</template>

Placing the scrollable element outside Vue does work:

views/app.blade.php

@inertia

<div id="test2" style="height:250px; border: 1px solid red; overflow-y: auto; margin: 50px" scroll-region>
    <div style="height:300px; border: 1px solid yellow; margin: 50px">
    </div>
</div>