It shows all index but not the last one.

My output:

• first message

• second message

It doesn’t shows the third message, I’m learning vuetify, and I don’t see an answer on internet…

This is my code:

<template>
    <v-card 
    v-for="item of messages"
    :key="item.id"
    width="300" 
    class="mb-3" 
    theme="dark"
    color="#1F7087" 
    :subtitle="item.displayName" 
    :text="item.text" 
    :class="item.uid === userChat.uid && 'ml-auto' "
    :color="item.uid == userChat.uid ? 'success' : '555'"
    ></v-card>
    
    
</template>


<script setup>
import { ref } from 'vue';

const userChat = ref({uid: "001"});

const messages = ref([
{
    id: 1,
    text: "First message",
    uid: "001",
    time: Date.now(),
    displayName: "Alejandro"
},
{
    id: 2,
    text: "second message",
    uid: "001",
    time: Date.now(),
    displayName: "Alejandro"
},

]);

</script>