Vue (Beta): Is there an example of for usage? (+ Questions)

<script lang="ts" setup>
    import { ref } from "vue";
    import { useVirtualizer } from "@tanstack/vue-virtual";

    const items = ref(new Array(10000)
        .fill(true)
        .map(() => 25 + Math.round(Math.random() * 100)));

    const scrollElement = ref();

    const virtualizerOptions = ref({
        getScrollElement: () => scrollElement.value,
        estimateSize: (i) => items[i],
        count: items.length
    });  
</script>

<template>
    <!-- The scrollable element -->
    <div ref="scrollElement" :style="{
                height: '100%',
                width: '100%',
                overflowY: 'auto',
                contain: 'strict'
            }">
        <!-- The large inner element to hold all of the items -->
        <div :style="{
                    height: virtualizer.getTotalSize(),
                    width: '100%',
                    position: 'relative'
                }">
            <!-- Only the visible items in the virtualizer, manually positioned to be in view  -->
            <div v-for="item in items" :key="item.key" :style="{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: `${item.size}px`,
                        transform: `translateY(${item.start}px)`
                    }">
                {{ item.index }}
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    import { useVirtualizer } from "@tanstack/vue-virtual";

    const items = ref(new Array(10000)
        .fill(true)
        .map(() => 25 + Math.round(Math.random() * 100)));

    const scrollElement = ref();

    const virtualizerOptions = ref({
        getScrollElement: () => scrollElement.value,
        estimateSize: (i) => items[i],
        count: items.length
    });  
</script>

<template>
    <!-- The scrollable element -->
    <div ref="scrollElement" :style="{
                height: '100%',
                width: '100%',
                overflowY: 'auto',
                contain: 'strict'
            }">
        <!-- The large inner element to hold all of the items -->
        <div :style="{
                    height: virtualizer.getTotalSize(),
                    width: '100%',
                    position: 'relative'
                }">
            <!-- Only the visible items in the virtualizer, manually positioned to be in view  -->
            <div v-for="item in items" :key="item.key" :style="{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: `${item.size}px`,
                        transform: `translateY(${item.start}px)`
                    }">
                {{ item.index }}
            </div>
        </div>
    </div>
</template>