FIO-10593 | DataCloneError when using Vue and Static Form Definitions.

package.json

@@ -8,6 +8,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build && tsc",
+    "dev": "vite build --watch",
     "prepublish": "npm run build"
   },
   "repository": {
@@ -34,6 +35,7 @@
     "@formio/js": "5.0.0-rc.69",
     "@types/node": "^18.17.5",
     "@types/vue": "^2.0.0",
+    "@types/lodash": "^4.14.202",
     "@vue/compiler-sfc": "^3.4.15",
     "typescript": "^5.3.3",
     "typescript-eslint-parser": "^22.0.0",
@@ -45,6 +47,6 @@
     "dist"
   ],
   "dependencies": {
-    "@ungap/structured-clone": "^1.2.0"
+    "lodash": "^4.17.21"
   }
 }

src/components/Form.ts

@@ -1,6 +1,6 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, watch, CSSProperties, PropType, Prop, toRefs, toRaw } from 'vue';
 import { EventEmitter, Form as FormClass, Webform } from '@formio/js';
-import structuredClone from '@ungap/structured-clone';
+import { cloneDeep as structuredClone } from 'lodash';
 import { FormConstructor, FormHandlers, FormProps, FormSource } from '../types';
 import useFormioRef from '../composables/useFormioRef';
 
@@ -240,7 +240,6 @@ export const Form = defineComponent({
         props.formioform,
         props.onFormReady,
         props.formReady,
-        props.form,
         props.src,
         props.options,
         props.url,
@@ -253,6 +252,28 @@ export const Form = defineComponent({
       },
     );
 
+    // Handle form schema updates intelligently
+    watch(
+      () => props.form,
+      (newForm, oldForm) => {
+        if (instanceIsReady.value && formInstance.value && newForm && oldForm) {
+          // Update the form schema without recreating the instance
+          formInstance.value.form = newForm;
+          // Trigger a rebuild to apply schema changes
+          formInstance.value.build(formioRef.value);
+        } else if (
+          instanceIsReady.value &&
+          formInstance.value &&
+          newForm &&
+          !oldForm
+        ) {
+          // Initial form load
+          formInstance.value.form = newForm;
+        }
+      },
+      { deep: true },
+    );
+
     watch(
       () => [
         instanceIsReady.value,

src/components/FormBuilder.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, onMounted, onBeforeUnmount, ref, watch, PropType, toRaw } from 'vue';
 import { FormBuilder as FormioFormBuilder } from '@formio/js';
 import { Component } from '@formio/core';
-import structuredClone from '@ungap/structured-clone';
+import { cloneDeep as structuredClone } from 'lodash';
 import { FormBuilderHandlers, FormBuilderProps, FormType } from '../types';
 import useFormioRef from '../composables/useFormioRef';