From 2b7db8829411e04f66f5c8b60424ca0bdd21d21b Mon Sep 17 00:00:00 2001
From: Theofilos Intzoglou <int.teo@gmail.com>
Date: Thu, 1 Aug 2024 10:15:31 +0000
Subject: [PATCH] =?UTF-8?q?=CE=A7=CF=81=CE=AE=CF=83=CE=B7=20ref=20=CF=83?=
 =?UTF-8?q?=CF=84=CE=BF=20state=20=CE=B3=CE=B9=CE=B1=20=CE=BD=CE=B1=20?=
 =?UTF-8?q?=CE=B5=CE=AF=CE=BD=CE=B1=CE=B9=20reactive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/form/field/CheckBox.vue          | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/resources/ts/components/frontend/form/field/CheckBox.vue b/resources/ts/components/frontend/form/field/CheckBox.vue
index 5cf165b0..016292d3 100644
--- a/resources/ts/components/frontend/form/field/CheckBox.vue
+++ b/resources/ts/components/frontend/form/field/CheckBox.vue
@@ -32,18 +32,20 @@ const isChecked = (id: number) => {
     return dataSelected.includes(`${id}`) || dataSelected.includes(id);
 };
 
-const state = listValues
-    .map((listValue) => {
-        return {
-            [`${listValue.id}`]: isChecked(listValue.id),
-        };
-    })
-    .reduce((a, b) => ({ ...a, ...b }), {});
+const state = ref(
+    listValues
+        .map((listValue) => {
+            return {
+                [`${listValue.id}`]: isChecked(listValue.id),
+            };
+        })
+        .reduce((a, b) => ({ ...a, ...b }), {})
+);
 
 const getValuesFromState = () => {
     const newValues: Array<string> = [];
-    Object.keys(state).forEach((key: string) => {
-        const keyValue = state[key];
+    Object.keys(state.value).forEach((key: string) => {
+        const keyValue = state.value[key];
         if (keyValue !== false) {
             newValues.push(listValues[parseInt(key, 10)].id.toString());
         }
@@ -56,7 +58,7 @@ const stateChanged = () => {
     formStore.field[props.field.id] = getValuesFromState();
 };
 
-watch(() => state, stateChanged, { deep: true });
+watch(state, stateChanged, { deep: true });
 </script>
 
 <template>