Browser Only Solution - Very Sluggish - Not Sure I'm Doing It Right

Describe the bug

First time user of vue-virtual-scroller, trying to understand the basics. For a number of reasons, I have to use vue (ver 3) in a "browser only" setup, so no vue cli or any compile step at all. It sucks, but that's how it is.

Anyways, I'm trying to get a dead simple virtual scroller going in a single web page, and I thought I got it right, and it looks correct in the F12 dev tools, but it's veeeeeryyy sluuugggiiisshh... Which makes me think I'm missing something. Please look at this and tell me what I did wrong!

Single page test:

<link href="https://unpkg.com/vue-virtual-scroller@2.0.0-beta.8/dist/vue-virtual-scroller.css" rel="stylesheet" />
<style scoped>
    .scroll-container {
        height: 300px;
    }
    .scroller {
        height: 100%;
    }
    .user {
        height: 32%;
        padding: 0 12px;
    }
</style>

<h2>Virtual Scroller</h2>

<div id="app">
    <div class="scroll-container">
        <recycle-scroller class="scroller"
                          :items="list"
                          :item-size="32"
                          key-field="id"
                          v-slot="{ item }">
            <div class="user">
                {{ item.name }}
            </div>
        </recycle-scroller>
    </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-virtual-scroller@2.0.0-beta.8/dist/vue-virtual-scroller.min.js"></script>

<script>
    const { createApp } = Vue;

    var app = createApp({
        data() {
            return {
                message: 'Hello Vue!',
                list: []
            }
        },
        mounted() {
            console.log("mounted");
            for (let i = 0; i < 1000; i++) {
                this.list.push({
                    id: i,
                    name: "item " + i
                });
            }
        }
    });

    app.component('RecycleScroller', VueVirtualScroller.RecycleScroller);
    app.mount('#app');
</script>

Reproduction

Put the sample html/js code in a page and run it.

System Info

Chrome browser, latest version

Used Package Manager

npm

Validations

[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

Akryum / vue-virtual-scroller