How to use single file component many times?

Question

Vue.js

Hello! In general, my idea is this: there is a Message component with the layout and functions of one message, that is, one specific message inside the chat, and when a certain event occurs, the time and text from the server are transferred to the Message, and it is added in another parent component.
I tried like this, but it didn't work:

import chatMessage from "./chat-message.vue"
...
mounted: function() {
 let thisComponents = this
 socket.on("message", data) {
   thisComponents.$el.appendChild("<chat-message messageText="data.messageText", messageTime="data.messageTime"></chat-message>")
  }
}, 
components: {
         chatMessage
}

chatMessage:

<template>
   <div class="chat-message">
      {{messageText}} <br>
      {{messageTime}}
   </div>
</template>

<script>
   export default {
      name: "chat-message",
      props: ["messageText", "messageTime"]
   }
</script>

There were a couple more ideas, but the bottom line is that something turns out to be inconvenient, or simply does not work. Any ideas how to implement this, or should I come up with some other structure? Thanks in advance)

Answer 1

<chat-message ...>must be written in the template of the current component with the v-for directive, and on an event, data must be added to the array in the state. Direct work with the DOM is not welcome, especially since it is not at all relevant here. See the Vue.js documentation