Fix naming for messages

src/views/messages/MessageList.vue

@@ -0,0 +1,36 @@
+<template>
+
+  <div v-for="(message, index) in messages" :key="index">
+    <Message :message="message"></Message>
+  </div>
+
+</template>
+
+<script setup>
+
+import Message from "@/views/messages/Message.vue";
+// import posts from "@/views/posts/posts.json";
+
+import {useClient} from '@/plugins/api.js';
+import {defineProps, onBeforeMount, ref} from 'vue';
+
+const props = defineProps({
+  contentId: {
+    type: String,
+    required: true
+  }
+});
+
+const client = useClient();
+const messages = ref();
+
+onBeforeMount(async () => {
+  try {
+    const response = await client.get(`/api/messages/${props.contentId}`)
+    messages.value = response.data
+  } catch (error) {
+    console.error("Failed to fetch posts", error);
+  }
+})
+
+</script>