Validation working

src/digital-components/checkbox-question/checkbox-question.vue

@@ -9,9 +9,9 @@
                 class="form-check-input me-2"
                 type="checkbox"
                 aria-checked="false"
-                :name="checkboxName"
+                :name="inputId"
                 :validationRules="validationRules"
-                :id="buttonID"
+                :id="inputId"
                 :tabindex="tabIndex"
                 :aria-required="isRequired" />
             <p v-html="checkboxLabelCopy" class="m-0"></p>
@@ -30,31 +30,28 @@ export default {
         checkboxLabelCopy() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
-        value: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
     },
     setup(props) {
         const uuid = uuidv4();
         const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
 
-        const propsClone = Object.assign({}, props);
-        const modelValue = propsClone.modelValue;
-
         const fieldOptions = {
-            value: modelValue,
-            initialValue: null,
+            initialValue: props.modelValue,
         };
 
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
-            useField(inputId, props.validationRules, fieldOptions);
+        const {
+            value,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            meta,
+            validate,
+            errors,
+            resetField,
+        } = useField(inputId, props.validationRules, fieldOptions);
 
         return {
+            value,
             errorMessage,
             handleBlur,
             handleChange,
@@ -79,6 +76,16 @@ export default {
             default: false,
         },
     },
+    watch: {
+        modelValue(newValue, oldValue) {
+            if (this.value !== newValue) {
+                this.value = newValue;
+            }
+        },
+        value(newValue, oldValue) {
+            this.$emit("update:modelValue", newValue);
+        },
+    },
 };
 </script>