diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 1f1430d..2aa7a8d 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -143,248 +143,254 @@
   </div>
 </template>
 
-<script>
-import { useStore } from "@/stores/index";
+<script setup>
+const props = defineProps({
+  api: String,
+  field: String,
+  column: Array,
+  first: Boolean,
+  optionid: String,
+  filter: Object,
+  addon: Object,
+  viewaddon: Object,
+  position: String,
+  disabled: Boolean,
+  vdata: Array,
+  clearable: Boolean,
+  placeholder: String,
+  searchfield: Array,
+});
+const { $copy, $dialog, $empty, $find, $findapi, $findIndex, $getdata, $id, $nonAccent, $store } = useNuxtApp();
+const emit = defineEmits(["option", "modalevent"]);
+const search = ref();
+const data = ref([]);
+const isLoading = ref(false);
+const timer = ref();
+const value = ref();
+const selected = ref();
+const showmodal = ref();
+const params = ref(props.api && $findapi(props.api).params);
+const orgdata = ref();
+const error = ref(false);
+const focused = ref(false);
+const count1 = ref(0);
+const count2 = ref(0);
+const docid = ref($id());
+const pos = ref();
 
-export default {
-  props: [
-    "api",
-    "field",
-    "column",
-    "first",
-    "optionid",
-    "filter",
-    "addon",
-    "viewaddon",
-    "position",
-    "disabled",
-    "vdata",
-    "clearable",
-    "placeholder",
-    "searchfield",
-  ],
-  setup() {
-    const store = useStore();
-    return { store };
-  },
-  data() {
-    return {
-      search: undefined,
-      data: [],
-      isLoading: false,
-      timer: undefined,
-      value: undefined,
-      selected: undefined,
-      showmodal: undefined,
-      params: this.api ? this.$findapi(this.api)["params"] : undefined,
-      orgdata: undefined,
-      error: false,
-      focused: false,
-      count1: 0,
-      count2: 0,
-      docid: this.$id(),
-      pos: undefined,
-    };
-  },
-  computed: {
-    isVietnamese() {
-      return this.store.lang === "vi";
-    },
-  },
-  async created() {
-    this.getPos();
-    if (this.vdata) {
-      this.orgdata = this.$copy(this.vdata);
-      this.orgdata.map((v) => (v.search = this.$nonAccent(v[this.field])));
+getPos();
+
+if (props.vdata) {
+  orgdata.value = props.vdata;
+  orgdata.value.forEach((v) => (v.search = $nonAccent(v[props.field])));
+}
+if (props.first) {
+  data.value = orgdata.value ? $copy(orgdata.value) : await getData();
+  if (props.optionid) {
+    let f = {};
+    f[props.field] = props.optionid;
+    if (props.optionid > 0) f = { id: props.optionid };
+    selected.value = $find(data.value, f);
+    if (selected.value && props.vdata) {
+      value.value = selected.value[props.field];
     }
-    if (this.first) {
-      this.data = this.orgdata ? this.$copy(this.orgdata) : await this.getData();
-      if (this.optionid) {
-        let f = {};
-        f[this.field] = this.optionid;
-        if (this.optionid > 0) f = { id: this.optionid };
-        this.selected = this.$find(this.data, f);
-        if (this.selected && this.vdata) {
-          return (this.value = this.selected[this.field]);
-        }
-      }
-    } else if (this.optionid) {
-      this.selected = await this.$getdata(this.api, { id: this.optionid }, undefined, true);
+  }
+} else if (props.optionid) {
+  selected.value = await $getdata(props.api, { id: props.optionid }, undefined, true);
+}
+if (selected.value) doSelect(selected.value);
+
+watch(
+  () => props.optionid,
+  () => {
+    if (props.optionid) selected.value = $find(data.value, { id: props.optionid });
+    if (selected.value) doSelect(selected.value);
+    else value.value = undefined;
+  },
+);
+
+watch(
+  () => props.filter,
+  async () => {
+    data.value = await getData();
+  },
+);
+
+watch(
+  () => props.vdata,
+  (newVal) => {
+    if (newVal) {
+      orgdata.value = $copy(props.vdata);
+      orgdata.value.forEach((v) => (v.search = $nonAccent(v[props.field])));
+      data.value = $copy(orgdata.value);
+      selected.value = undefined;
+      value.value = undefined;
+      if (props.optionid) selected.value = $find(data.value, { id: props.optionid });
+      if (selected.value) doSelect(selected.value);
     }
-    if (this.selected) this.doSelect(this.selected);
   },
-  watch: {
-    optionid: function (newVal) {
-      if (this.optionid) this.selected = this.$find(this.data, { id: this.optionid });
-      if (this.selected) this.doSelect(this.selected);
-      else this.value = undefined;
-    },
-    filter: async function (newVal) {
-      this.data = await this.getData();
-    },
-    vdata: function (newval) {
-      if (newval) {
-        this.orgdata = this.$copy(this.vdata);
-        this.orgdata.map((v) => (v.search = this.$nonAccent(v[this.field])));
-        this.data = this.$copy(this.orgdata);
-        this.selected = undefined;
-        this.value = undefined;
-        if (this.optionid) this.selected = this.$find(this.data, { id: this.optionid });
-        if (this.selected) this.doSelect(this.selected);
+);
+
+function choose(v) {
+  focused.value = false;
+  count1.value = 0;
+  count2.value = 0;
+  doSelect(v);
+}
+
+function setFocus() {
+  focused.value = true;
+  count1.value = 0;
+  count2.value = 0;
+}
+
+function lostFocus() {
+  setTimeout(() => {
+    if (focused.value && count1.value === 0) focused.value = false;
+  }, 200);
+}
+
+function pressEnter() {
+  if (data.value.length === 0) return;
+  choose(data.value[0]);
+}
+
+function doClick() {
+  count1.value += 1;
+}
+
+function doSelect(option) {
+  if ($empty(option)) return;
+  emit("option", option);
+  emit("modalevent", { name: "option", data: option });
+  selected.value = option;
+  value.value = selected.value[props.field];
+}
+
+function clearValue() {
+  value.value = undefined;
+  selected.value = undefined;
+  emit("option", null);
+  emit("modalevent", { name: "option", data: null });
+}
+
+function findObject(val) {
+  const rows = $copy(orgdata.value);
+  if ($empty(val)) data.value = rows;
+  else {
+    const text = $nonAccent(val);
+    data.value = rows.filter((v) => v.search.toLowerCase().indexOf(text.toLowerCase()) >= 0);
+  }
+}
+
+async function getData() {
+  isLoading.value = false;
+  params.value.filter = props.filter;
+  const data = await $getdata(props.api, undefined, params.value);
+  isLoading.value = true;
+  return data;
+}
+
+async function getApi(val) {
+  if (props.vdata) return findObject(val);
+  const text = val ? val.toLowerCase() : "";
+  const f = {};
+
+  // Sử dụng searchfield nếu có, nếu không thì dùng column
+  const fieldsToSearch = props.searchfield || props.column;
+
+  fieldsToSearch.map((v) => {
+    f[`${v}__icontains`] = text;
+  });
+  params.value.filter_or = f;
+  if (props.filter) params.value.filter = $copy(props.filter);
+  data.value = await $getdata(props.api, undefined, params.value);
+}
+
+function beginSearch(e) {
+  const val = e.target.value;
+  search.value = val;
+  clearTimeout(timer.value);
+  timer.value = setTimeout(() => getApi(val), 150);
+}
+
+function addNew() {
+  showmodal.value = props.addon;
+}
+
+function dataevent(v) {
+  console.log("SearchBox received dataevent:", v); // Debug log
+
+  if (!v || !v.id) {
+    console.error("Invalid data received in SearchBox:", v);
+    return;
+  }
+
+  // Tìm và cập nhật trong danh sách
+  const idx = $findIndex(data.value, { id: v.id });
+  if (idx < 0) {
+    // Nếu chưa có trong danh sách, thêm vào đầu
+    data.value.unshift(v);
+    console.log("Added new item to data:", v);
+  } else {
+    // Nếu đã có, cập nhật
+    data.value[idx] = v;
+    console.log("Updated existing item in data:", v);
+  }
+
+  // Cập nhật orgdata nếu có
+  if (orgdata.value) {
+    let orgIdx = $findIndex(orgdata.value, { id: v.id });
+    if (orgIdx < 0) {
+      orgdata.value.unshift(v);
+      // Thêm search field cho orgdata
+      if (props.field && v[props.field]) {
+        v.search = $nonAccent(v[props.field]);
       }
-    },
-  },
-  methods: {
-    choose(v) {
-      this.focused = false;
-      this.count1 = 0;
-      this.count2 = 0;
-      this.doSelect(v);
-    },
-    setFocus() {
-      this.focused = true;
-      this.count1 = 0;
-      this.count2 = 0;
-    },
-    lostFocus() {
-      let self = this;
-      setTimeout(() => {
-        if (self.focused && self.count1 === 0) self.focused = false;
-      }, 200);
-    },
-    pressEnter() {
-      if (this.data.length === 0) return;
-      this.choose(this.data[0]);
-    },
-    doClick() {
-      this.count1 += 1;
-    },
-    doSelect(option) {
-      if (this.$empty(option)) return;
-      this.$emit("option", option);
-      this.$emit("modalevent", { name: "option", data: option });
-      this.selected = option;
-      this.value = this.selected[this.field];
-    },
-    clearValue() {
-      this.value = undefined;
-      this.selected = undefined;
-      this.$emit("option", null);
-      this.$emit("modalevent", { name: "option", data: null });
-    },
-    findObject(val) {
-      let rows = this.$copy(this.orgdata);
-      if (this.$empty(val)) this.data = rows;
-      else {
-        let text = this.$nonAccent(val);
-        this.data = rows.filter((v) => v.search.toLowerCase().indexOf(text.toLowerCase()) >= 0);
+    } else {
+      orgdata.value[orgIdx] = v;
+      if (props.field && v[props.field]) {
+        orgdata.value[orgIdx].search = $nonAccent(v[props.field]);
       }
-    },
-    async getData() {
-      this.isLoading = false;
-      this.params.filter = this.filter;
-      let data = await this.$getdata(this.api, undefined, this.params);
-      this.isLoading = true;
-      return data;
-    },
-    async getApi(val) {
-      if (this.vdata) return this.findObject(val);
-      let text = val ? val.toLowerCase() : "";
-      let f = {};
+    }
+  }
 
-      // Sử dụng searchfield nếu có, nếu không thì dùng column
-      const fieldsToSearch = this.searchfield || this.column;
+  // **Tự động select item vừa tạo/cập nhật**
+  doSelect(v);
 
-      fieldsToSearch.map((v) => {
-        f[`${v}__icontains`] = text;
-      });
-      this.params.filter_or = f;
-      if (this.filter) this.params.filter = this.$copy(this.filter);
-      let arr = await this.$getdata(this.api, undefined, this.params);
-      this.data = this.$copy(arr);
-    },
-    beginSearch(e) {
-      let val = e.target.value;
-      this.search = val;
-      if (this.timer) clearTimeout(this.timer);
-      this.timer = setTimeout(() => this.getApi(val), 150);
-    },
-    addNew() {
-      this.showmodal = this.$copy(this.addon);
-    },
-    dataevent(v) {
-      console.log("SearchBox received dataevent:", v); // Debug log
+  // Đóng modal
+  showmodal.value = undefined;
+  console.log("SearchBox data after update:", data.value);
+}
 
-      if (!v || !v.id) {
-        console.error("Invalid data received in SearchBox:", v);
-        return;
-      }
+function viewInfo() {
+  if (!selected.value)
+    return $dialog(
+      $store.lang === "vi" ? "Vui lòng lựa chọn trước khi xem thông tin." : "Please select before viewing",
+      $store.lang === "vi" ? "Thông báo" : "Notice",
+    );
+  showmodal.value = {
+    ...props.viewaddon,
+    vbind: { row: selected.value },
+  };
+}
 
-      // Tìm và cập nhật trong danh sách
-      let idx = this.$findIndex(this.data, { id: v.id });
-      if (idx < 0) {
-        // Nếu chưa có trong danh sách, thêm vào đầu
-        this.data.unshift(v);
-        console.log("Added new item to data:", v);
-      } else {
-        // Nếu đã có, cập nhật
-        this.data[idx] = v;
-        console.log("Updated existing item in data:", v);
-      }
-
-      // Cập nhật orgdata nếu có
-      if (this.orgdata) {
-        let orgIdx = this.$findIndex(this.orgdata, { id: v.id });
-        if (orgIdx < 0) {
-          this.orgdata.unshift(v);
-          // Thêm search field cho orgdata
-          if (this.field && v[this.field]) {
-            v.search = this.$nonAccent(v[this.field]);
-          }
-        } else {
-          this.orgdata[orgIdx] = v;
-          if (this.field && v[this.field]) {
-            this.orgdata[orgIdx].search = this.$nonAccent(v[this.field]);
-          }
-        }
-      }
-
-      // **Tự động select item vừa tạo/cập nhật**
-      this.doSelect(v);
-
-      // Đóng modal
-      this.showmodal = undefined;
-
-      console.log("SearchBox data after update:", this.data);
-    },
-    viewInfo() {
-      if (!this.selected)
-        return this.$dialog(
-          this.isVietnamese ? "Vui lòng lựa chọn trước khi xem thông tin." : "Please select before viewing",
-          this.isVietnamese ? "Thông báo" : "Notice",
-        );
-      let copy = this.$copy(this.viewaddon);
-      copy.vbind = { row: this.selected };
-      this.showmodal = copy;
-    },
-    getPos() {
-      switch (this.position) {
-        case "is-top-left":
-          this.pos = "is-up is-left";
-          break;
-        case "is-top-right":
-          this.pos = "is-up is-right";
-          break;
-        case "is-bottom-left":
-          this.pos = "is-right";
-          break;
-        case "is-bottom-right":
-          this.pos = "is-right";
-          break;
-      }
-    },
-  },
-};
+function getPos() {
+  switch (props.position) {
+    case "is-top-left":
+      pos.value = "is-up is-left";
+      break;
+    case "is-top-right":
+      pos.value = "is-up is-right";
+      break;
+    case "is-bottom-left":
+      pos.value = "is-right";
+      break;
+    case "is-bottom-right":
+      pos.value = "is-right";
+      break;
+  }
+}
 </script>
 <style scoped>
 .field:not(:last-child) {