Adds reactivity to content-list

src/views/messages/MessageList.vue

@@ -1,12 +1,14 @@
 <template>
   <v-infinite-scroll
       :items="messages"
-      :onLoad="load"
+      :onLoad="fetchMessages"
       mode="manual"
       class="justify-items-center"
   >
-    <template v-for="(message, index) in messages" :key="index">
-      <message :message="message" class="border-b"></message>
+    <template v-for="message in messages" :key="message">
+      <message :message="message"
+               class="border-b"
+      ></message>
     </template>
 
     <template v-slot:load-more="{ props }">
@@ -26,8 +28,8 @@
 </template>
 
 <script setup>
-import { ref, onBeforeMount } from 'vue';
-import { useClient } from '@/plugins/api.js';
+import {ref, onBeforeMount} from 'vue';
+import {useClient} from '@/plugins/api.js';
 import Message from "@/views/messages/Message.vue";
 
 const props = defineProps({
@@ -48,14 +50,15 @@ const messages = ref(props.messages);
 
 onBeforeMount(async () => {
   if (props.subjectId == null) return;
-  await load({
+  await fetchMessages({
     page_size: 2,
-    done: function (status) {},
+    done: function (status) {
+    },
   });
 });
 
-async function load({ done, page_size = 10 }) {
-  if (props.subjectId == null) return;
+async function fetchMessages({done, page_size = 10}) {
+  if (props.subjectId == null) return
 
   try {
     let uri = `/api/messages/${props.subjectId}?page_size=${page_size}`;

src/views/messages/PostMessage.vue

@@ -52,13 +52,12 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
-import {v7} from 'uuid';
-import {useRouter} from "vue-router";
-import {useClient} from '@/plugins/api.js';
-import {useUserStore} from "@/stores/userStore.js";
-import {useAuthStore} from "@/stores/authStore.js";
-import LoginForm from "@/views/main/LoginForm.vue";
+import {ref} from 'vue'
+import {v7} from 'uuid'
+import {useClient} from '@/plugins/api.js'
+import {useUserStore} from "@/stores/userStore.js"
+import {useAuthStore} from "@/stores/authStore.js"
+import LoginForm from "@/views/main/LoginForm.vue"
 
 const closeModal = () => {
   loginModal.value = false;
@@ -71,12 +70,11 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['message-posted'])
+const emits = defineEmits(['message-posted'])
 
 const loginModal = ref(false);
 const client = useClient()
 const value = ref("")
-const router = useRouter()
 const userStore = useUserStore()
 const authStore = useAuthStore()
 
@@ -91,7 +89,7 @@ const publish = async () => {
         "subjectId": props.subjectId,
         "message": value.value
       })
-      emit('message-posted', {
+      emits('message-posted', {
         "id": messageId,
         "subjectId": props.subjectId,
         "createdBy": userStore.user.id,