Vue Js Array foreach Loop

<html>
<head>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
</head>
<body>
    <div id="app">
        <h3>Vue forEach loop in Array of Object</h3>
        <ul>
            <li v-for="(formattedItem, index) in formattedItems" :key="index">
                {{ formattedItem }}
            </li>

</ul>
    </div>
    <script type="module">
        import { createApp } from 'vue'
        createApp({
            data() {
                return {
                    items: [
                        { name: 'John', age: 30 },
                        { name: 'Jane', age: 25 },
                        { name: 'Doe', age: 40 }
                    ]
                };
            },
            computed: {
                formattedItems() {
                    const formatted = [];
                    this.items.forEach(item => {
                        formatted.push(`${item.name} - ${item.age}`);
                    });
                    return formatted;
                }
            }
        }).mount('#app')
    </script>
</body>
</html>