diff --git a/src/components/UI/UIDetails/messageItem.vue b/src/components/UI/UIDetails/messageItem.vue
index dda2b92..b0ecc3a 100644
--- a/src/components/UI/UIDetails/messageItem.vue
+++ b/src/components/UI/UIDetails/messageItem.vue
@@ -5,7 +5,7 @@
     :transform = "startingOffset"
   >
     <rect
-      ref="bubble"
+      ref="bubbleTag"
       id="#bubble"
       x="30"
       y="10"
@@ -18,7 +18,7 @@
       font-size="14"
       font-family="SF Pro"
       id="#message"
-      ref="content"
+      ref="contentTag"
       :fill="textFill"
     >
       <tspan
@@ -67,6 +67,10 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
 
       let textArr: string[] = reactive([]);
       const signature = ref("");
+      const msgID = ref(props.item.id);
+      const bubbleTag = ref(`bubble${msgID.value}`);
+      const contentTag = ref(`content${msgID.value}`);
+
 
       let bubble: any;
       let content: any;
@@ -131,8 +135,10 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
       }
       createTextBox(props.item.content, 32);
       onMounted(async () => {
-          bubble = document.getElementById("#bubble");
-          content = document.getElementById("#message");
+          console.log(bubbleTag.value);
+          console.log(contentTag.value)
+          bubble = bubbleTag.value;
+          content = contentTag.value;
           await adjustRect();
           signaturePosition();
 
@@ -145,7 +151,9 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
           signaturePosition,
           textArr,
           signature,
-          content
+          contentTag,
+          msgID,
+          bubbleTag
       }
 
   },