Work for #2756: start implement reactivity

packages/survey-vue-ui/src/base.ts

@@ -1,31 +1,44 @@
-import type { Question } from "survey-core";
-import { ref, onBeforeMount } from "vue";
+import type { Base } from "survey-core";
+import { ref, defineComponent, type ComponentOptions } from "vue";
 
-// by convention, composable function names start with "use"
-export function makeReactive(question: Question): void {
-  onBeforeMount(() => {
-    question.iteratePropertiesHash((propertiesHash: any, name: any) => {
+function makeReactive(surveyElement: Base) {
+  surveyElement.iteratePropertiesHash((propertiesHash: any, name: any) => {
+    // (<any>Vue.util).defineReactive(propertiesHash, name, propertiesHash[name]);
+    propertiesHash[name] = ref(propertiesHash[name]);
+  });
+  surveyElement.getPropertyValueCoreHandler = (
+    propertiesHash: any,
+    name: string
+  ) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!propertiesHash.hasOwnProperty(name)) {
       // (<any>Vue.util).defineReactive(propertiesHash, name, propertiesHash[name]);
       propertiesHash[name] = ref(propertiesHash[name]);
-    });
-    question.getPropertyValueCoreHandler = (
-      propertiesHash: any,
-      name: string
-    ) => {
-      if (!propertiesHash.hasOwnProperty(name)) {
-        // (<any>Vue.util).defineReactive(propertiesHash, name, propertiesHash[name]);
-        propertiesHash[name] = ref(propertiesHash[name]);
-      }
-      return propertiesHash[name].value;
-    };
-    question.setPropertyValueCoreHandler = (
-      propertiesHash: any,
-      name: string,
-      val: any
-    ) => {
-      if (!propertiesHash.hasOwnProperty(name)) {
-        propertiesHash[name] = ref(propertiesHash[name]);
-      } else propertiesHash[name].value = val;
-    };
-  });
+    }
+    return propertiesHash[name].value;
+  };
+  surveyElement.setPropertyValueCoreHandler = (
+    propertiesHash: any,
+    name: string,
+    val: any
+  ) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!propertiesHash.hasOwnProperty(name)) {
+      propertiesHash[name] = ref(propertiesHash[name]);
+    } else propertiesHash[name].value = val;
+  };
+}
+// by convention, composable function names start with "use"
+
+export function defineSurveyComponent(componentDefinition: ComponentOptions) {
+  const mounted = componentDefinition.mounted;
+  componentDefinition.mounted = function () {
+    if (typeof this.getModel === "function") {
+      makeReactive(this.getModel());
+    }
+    if (mounted) {
+      mounted.call(this);
+    }
+  };
+  return defineComponent(componentDefinition);
 }

packages/survey-vue-ui/src/components/Survey.vue

@@ -5,15 +5,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
 import { Model } from "survey-core";
+import { defineSurveyComponent } from "../base";
 
-export default defineComponent({
+export default defineSurveyComponent({
   // eslint-disable-next-line
   name: "Survey",
   props: {
     model: Model,
   },
+  data: (vm: any) => {
+    return {
+      getModel: () => { return vm.model; }
+    }
+  }
 });
 </script>