Fix message count

src/views/contents/contentcards/SmContentCard.vue

@@ -72,7 +72,7 @@
             variant="plain"
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
-          {{ messages.length }}
+          {{ messageCount }}
         </v-btn>
 
         <donation-button :color-border="colorMenu"
@@ -140,7 +140,7 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, onBeforeMount, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -150,6 +150,7 @@ import ImageViewer from '../ImageViewer.vue';
 import {useClient} from "@/plugins/api.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import Reaction from "@/views/contents/Reaction.vue";
+import {useMessageStore} from "@/stores/messageStore.js";
 
 const props = defineProps({
   content: {
@@ -170,12 +171,18 @@ const colorAccent = computed(() => props.content.colorAccent)
 
 const authStore = useAuthStore()
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+const messageStore = useMessageStore();
+const messageCount = ref(0);
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const messagesVisible = ref(false);
 const messages = ref([]);
 const hasMessages = computed(() => messages.value.length > 0)
 
+onBeforeMount(async () => {
+  messageCount.value = await messageStore.fetchMessageCount(contentId.value)
+})
+
 function openDeleteConfirmationDialog() {
   openDeleteConfirmationModal.value = true;
 }