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}`;