TypeError: Cannot read properties of undefined (reading 'name') at Proxy.render

[clarence-simplex]

I'm trying out Vue under Razor pages as follow and get the above error.
What's missing for the v-for to work?

Without item.name, the variable message is displayed correctly, i.e. Vue library is loaded and working.
In addition, can Vue loop through a vanilla javascript array instead? i.e. const items=[{ id:1, name: 'orange', amount: 3 }, { id:2, name: 'apple', amount: 5}...]?

@page
@model test.vue
@{ ViewData["Title"] = "Vue Test"; }

<div id="app" v-for="item in items" :key="item.id"> {{ message }} {{ item.name }}</div>

<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                message: 'Vue 3, hurray!',
                items: [{ id: 1, name: 'Orange', amount: 3 }, { id: 2, name: 'Apple', amount: 5 }]
            }
        }
    }).mount('#app')

</script>