v-for only getting one first value vuejs

Using v-for in Vue.js to Iterate Over a List

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

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
})

1. In the Vue template, a div element with the id of "app" is defined to contain the Vue app.
2. Inside the div, an ul element is used to create an unordered list.
3. The li element contains a v-for directive, which iterates over the items array in the Vue instance.
4. The :key attribute is used to provide a unique identifier for each item in the list.
5. Within the li element, the item.name is displayed using double curly braces {{ }}.
6. In the Vue instance, a new Vue instance is created with the el property set to the ID of the containing div element.
7. The data property defines an items array, with each item containing an id and a name.
8. When the Vue app is mounted, the v-for directive will iterate over the items array and render the list of items in the unordered list.