Vue 3 Map Array

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <h3>Vue 3 Array Map</h3>
        <p>{{originalArray}}.</p>
        <button @click="transformToUppercase">Transform to Uppercase</button>
    </div>
    <script type="module">
        const { createApp, ref, computed } = Vue;
        createApp({
            setup() {
                const originalArray = ref(['Apple', 'Banana', 'Orange', 'Grapes']);
                const transformedArray = computed(() => {
                    return originalArray.value.map(item => item.toUpperCase());
                });
                const transformToUppercase = () => {
                    originalArray.value = originalArray.value.map(item => item.toUpperCase());
                };
                return {
                    originalArray,
                    transformToUppercase,
                };
            }
        }).mount("#app");
    </script>
    <style scoped></style>
</body>

</html>