I'm trying to make a chat based on this link:

Functioning small example program:

<script>
import { ref } from "vue";

export default {
  data() {
    return {
      messages: [
        {
          fromSelf: true,
          content: "Hello folks!",
          username: ''
        },
        {
          fromSelf: false,
          content: "Hello, back to you!",
          username: 'John'
        },
        {
          fromSelf: true,
          content: "How are you doing?",
          username: ''
        },
        {
          fromSelf: false,
          content: "I'm doing very well here, you?",
          username: 'John'
        },
      ],
    };
  },
};
</script>

<template>
  <ul >
    <li
      v-for="(message, index) in messages"
      :key="index"
      :
    >
      <div >
        {{ message.fromSelf ? "(yourself)" : message.username   ":" }}
      </div>
      {{ message.content }}
    </li>
  </ul>
</template>

<style>
.message {
  list-style: none;
  background-color: white;
  
  border: solid;
  border-color: gray;
  border-width: 1px;
  border-radius: 15px;

  margin-bottom: 10px;
  padding: 10px;
}
  
.self-message {
  background-color: lightgray;
}
</style>