Creating and deleting zones now works

src/components/utilities/Modal.vue

@@ -1,8 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef"
-         class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
-         :style="modalStyle">
+    <div v-if="isModalOpenRef" class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
@@ -13,9 +11,7 @@
       </div>
       <div class="overflow-auto flex-grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize"
-             class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
-             @mousedown="startResize" />
+        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]" @mousedown="startResize" />
       </div>
       <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
@@ -143,20 +139,29 @@ function initializePosition() {
   y.value = (window.innerHeight - height.value) / 2
 }
 
-watch(() => props.isModalOpen, (value) => {
-  isModalOpenRef.value = value
-  if (value) {
-    initializePosition()
+watch(
+  () => props.isModalOpen,
+  (value) => {
+    isModalOpenRef.value = value
+    if (value) {
+      initializePosition()
+    }
   }
-})
+)
 
-watch(() => props.modalWidth, (value) => {
-  width.value = Math.min(value, window.innerWidth)
-})
+watch(
+  () => props.modalWidth,
+  (value) => {
+    width.value = Math.min(value, window.innerWidth)
+  }
+)
 
-watch(() => props.modalHeight, (value) => {
-  height.value = Math.min(value, window.innerHeight)
-})
+watch(
+  () => props.modalHeight,
+  (value) => {
+    height.value = Math.min(value, window.innerHeight)
+  }
+)
 
 onMounted(() => {
   window.addEventListener('mousemove', drag)
@@ -174,4 +179,4 @@ onUnmounted(() => {
   window.removeEventListener('mouseup', stopResize)
   window.removeEventListener('resize', handleResize)
 })
-</script>
+</script>