comments reactive

src/components/project/client-brief/PdfViewer.vue

@@ -17,7 +17,7 @@
       <VPdfViewer
         :darkMode="true"
         :initialThumbnailsVisible="true"
-        :src="file.url"
+        :src="openedFile.url"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
@@ -42,10 +42,11 @@ import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 import { ref, watch } from "vue";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
 
 const dialog = useDialogStore();
-dialog.openedFile = dialog.content.files[0];
-const file = dialog.openedFile;
+const { openedFile, comments } = storeToRefs(useDialogStore());
+openedFile.value = dialog.content.files[0];
 
 const router = useRouter();
 const route = useRoute();
@@ -69,15 +70,12 @@ watch(isCommentsOpen, (newVal) => {
   }
 });
 
-watch(
-  () => file,
-  (newVal) => {
-    removeCommentBubbles();
-    if (newVal.comments) {
-      setCommentBubbles();
-    }
+watch(openedFile, (newVal) => {
+  removeCommentBubbles();
+  if (newVal.comments) {
+    setCommentBubbles();
   }
-);
+});
 
 // Functions
 const onPdfLoaded = () => {
@@ -121,8 +119,8 @@ const onPdfLoaded = () => {
 };
 
 function setCommentBubbles() {
-  if (!file.comments) return;
-  file.comments.forEach((comment) => {
+  if (!comments.value) return;
+  comments.value.forEach((comment) => {
     const bubble = document.createElement("a");
 
     bubble.classList.add("comment-bubble");