changes

app/components/imports/EditProductButton.vue

@@ -2,30 +2,32 @@
 const props = defineProps({
   variant: Object,
 });
+
+const showModal = ref(null);
+
+function displayModal() {
+  showModal.value = {
+    title: "Cập nhật sản phẩm",
+    width: "90%",
+    height: "400px",
+    component: "imports/EditProduct",
+    vbind: { variant: props.variant },
+  };
+}
 </script>
 
 <template>
-  <a
-    @click="
-      $emit('clickevent', {
-        name: 'dataevent',
-        data: {
-          modal: {
-            title: 'Cập nhật sản phẩm',
-            width: '90%',
-            height: '400px',
-            component: 'imports/EditProduct',
-            vbind: { variant: props.variant },
-          },
-        },
-      })
-    "
-  >
+  <a @click="displayModal">
     <span class="icon">
       <Icon
         name="material-symbols:edit-outline-rounded"
         :size="18"
       />
     </span>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = null"
+    />
   </a>
 </template>

app/components/imports/ProductForm.vue

@@ -62,10 +62,6 @@ onMounted(async () => {
   }
 });
 
-watch(body, (newVal) => {
-  console.dir("body changed", newVal);
-});
-
 const isDirty = computed(() => !isEqual(body.value, defaultBody.value));
 
 function selected(field, data) {