Vue 3 Map Array

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue 3 Map Array of Object</h3>
        <ul>
            <li v-for="(item, index) in modifiedItems" :key="index">
                {{ item.id }} - {{ item.name }}
            </li>
        </ul>
        <button @click="convertToUppercase">Convert Names to Lowercase</button>
    </div>
    <script type="module">
        const { createApp, reactive} = Vue;
        createApp({
            setup() {
                const items = reactive([
                    { id: 1, name: 'Andrew' },
                    { id: 2, name: 'Jack' },
                    { id: 3, name: 'Sarggy' }
                ]);

const modifiedItems = reactive([...items]);

const convertToUppercase = () => {
                    modifiedItems.forEach(item => {
                        item.name = item.name.toLowerCase();
                    });
                };

return {
                    modifiedItems,
                    convertToUppercase
                };

}
        }).mount("#app");
    </script>
    <style scoped></style>
</body>

</html>