Fixed the router, and editable div

resources/js/components/common/EditableDiv.vue

@@ -1,12 +1,11 @@
 <template>
-  <div ref="parent"
+  <div ref="parentRef"
        tabindex="0"
        :class="{
          'hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-2 cursor-pointer': !editing
-         }"
-
+       }"
        class="relative"
-       :style="{height: editing?(divHeight+'px'):'auto'}"
+       :style="{ height: editing ? divHeight + 'px' : 'auto' }"
        @focus="startEditing"
   >
     <slot v-if="!editing" :content="content">
@@ -15,43 +14,59 @@
       </label>
     </slot>
     <div v-if="editing" class="absolute inset-0 border-2 transition-colors"
-         :class="{'border-transparent':!editing,'border-blue-500':editing}">
-      <input ref="editinput" v-model="content"
+         :class="{ 'border-transparent': !editing, 'border-blue-500': editing }"
+    >
+      <input ref="editInputRef" v-model="content"
              class="absolute inset-0 focus:outline-none bg-white transition-colors"
-             :class="[{'bg-blue-50':editing},contentClass]" @blur="editing = false" @keyup.enter="editing = false"
+             :class="[{'bg-blue-50': editing}, contentClass]" @blur="editing = false" @keyup.enter="editing = false"
              @input="handleInput"
       >
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    value: {required: true},
-    textAlign: {type: String, default: 'left'},
-    contentClass: {type: String | Object, default: ''}
-  },
+<script setup>
+import { ref, onMounted, watch, nextTick, defineProps, defineEmits } from 'vue'
 
-  data() {
-    return {
-      content: this.value,
-      editing: false,
-      divHeight: 0
-    }
-  },
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  textAlign: { type: String, default: 'left' },
+  contentClass: { type: String, default: '' }
+})
 
-  methods: {
-    startEditing() {
-      this.divHeight = this.$refs.parent.offsetHeight
-      this.editing = true
-      this.$nextTick(() => {
-        this.$refs.editinput.focus()
-      })
-    },
-    handleInput(e) {
-      this.$emit('input', this.content)
-    }
+const emit = defineEmits()
+const content = ref(props.modelValue)
+const editing = ref(false)
+const divHeight = ref(0)
+
+const parentRef = ref(null) // Ref for parent element
+const editInputRef = ref(null) // Ref for edit input element
+
+const startEditing = () => {
+  if (parentRef.value) {
+    divHeight.value = parentRef.value.offsetHeight
+    editing.value = true
+    nextTick(() => {
+      if (editInputRef.value) {
+        editInputRef.value.focus()
+      }
+    })
   }
 }
+
+const handleInput = () => {
+  emit('update:modelValue', content.value)
+}
+
+// Watch for changes in props.modelValue and update the local content
+watch(() => props.modelValue, (newValue) => {
+  content.value = newValue
+})
+
+// Wait until the component is mounted to set the initial divHeight
+onMounted(() => {
+  if (parentRef.value) {
+    divHeight.value = parentRef.value.offsetHeight
+  }
+})
 </script>