fix: view is not updated when properties are modified programmatically

Author: cloydlau

auto-imports.d.ts

@@ -61,5 +61,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }

demo/vue2.6/index.vue

@@ -1,13 +1,52 @@
+<script>
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+import JsonEditorVue from '../../src'
+
+Vue.use(VueCompositionAPI)
+
+export default {
+  components: { JsonEditorVue },
+  data() {
+    return {
+      version: Vue.version,
+      value: {
+        bigint: 124124124124124124124n,
+        boolean: true,
+        string: 'Hello World',
+        number: 123.456,
+        color: '#b0a4e3',
+        null: null,
+        time: 1575599819000,
+        array: [1, 2],
+        object: {
+          a: 'b',
+          c: 'd',
+        },
+      },
+      mode: undefined,
+      readOnly: false,
+    }
+  },
+  mounted() {
+    console.log('expand: ', this.$refs.jsonEditorVueRef.jsonEditor.expand)
+  },
+}
+</script>
+
 <template>
   <div>
     <h1>vue@{{ version }}</h1>
     <p>
-      <button @click="value = '123'">
+      <button @click="data.value = Math.random()">
         设值为 string
       </button>
-      <button @click="value = { abc: '123' }">
+      <button @click="data.value = { abc: Math.random() }">
         设值为 JSON
       </button>
+      <button @click="data.value.number = Math.random()">
+        改变属性
+      </button>
       <button @click="value = undefined">
         清空
       </button>
@@ -36,26 +75,3 @@
     {{ typeof value }}
   </div>
 </template>
-
-<script>
-import Vue from 'vue'
-import VueCompositionAPI from '@vue/composition-api'
-import JsonEditorVue from '../../src'
-
-Vue.use(VueCompositionAPI)
-
-export default {
-  components: { JsonEditorVue },
-  data() {
-    return {
-      version: Vue.version,
-      value: undefined,
-      mode: undefined,
-      readOnly: false,
-    }
-  },
-  mounted() {
-    console.log('expand: ', this.$refs.jsonEditorVueRef.jsonEditor.expand)
-  },
-}
-</script>

demo/vue2.7/index.vue

@@ -1,13 +1,46 @@
+<script setup>
+import { onMounted, reactive, ref, version } from 'vue'
+import JsonEditorVue from '../../src'
+
+const data = reactive({
+  value: {
+    bigint: 124124124124124124124n,
+    boolean: true,
+    string: 'Hello World',
+    number: 123.456,
+    color: '#b0a4e3',
+    null: null,
+    time: 1575599819000,
+    array: [1, 2],
+    object: {
+      a: 'b',
+      c: 'd',
+    },
+  },
+  mode: undefined,
+  readOnly: false,
+})
+
+const jsonEditorVueRef = ref()
+
+onMounted(() => {
+  console.log('expand: ', jsonEditorVueRef.value.jsonEditor.expand)
+})
+</script>
+
 <template>
   <div>
     <h1>vue@{{ version }}</h1>
     <p>
-      <button @click="data.value = '123'">
+      <button @click="data.value = Math.random()">
         设值为 string
       </button>
-      <button @click="data.value = { abc: '123' }">
+      <button @click="data.value = { abc: Math.random() }">
         设值为 JSON
       </button>
+      <button @click="data.value.number = Math.random()">
+        改变属性
+      </button>
       <button @click="data.value = undefined">
         清空
       </button>
@@ -36,20 +69,3 @@
     {{ typeof data.value }}
   </div>
 </template>
-
-<script setup>
-import { onMounted, reactive, ref, version } from 'vue'
-import JsonEditorVue from '../../src'
-
-const data = reactive({
-  value: undefined,
-  mode: undefined,
-  readOnly: false,
-})
-
-const jsonEditorVueRef = ref()
-
-onMounted(() => {
-  console.log('expand: ', jsonEditorVueRef.value.jsonEditor.expand)
-})
-</script>

demo/vue3/index.vue

@@ -22,7 +22,20 @@ const data = reactive<{
   readOnly?: boolean
   parser?: { parse: (...args: any) => unknown; stringify: (...args: any) => unknown }
 }>({
-      value: undefined,
+      value: {
+        bigint: 124124124124124124124n,
+        boolean: true,
+        string: 'Hello World',
+        number: 123.456,
+        color: '#b0a4e3',
+        null: null,
+        time: 1575599819000,
+        array: [1, 2],
+        object: {
+          a: 'b',
+          c: 'd',
+        },
+      },
       mode: undefined,
       readOnly: false,
       parser: LosslessJSONParser,
@@ -38,12 +51,15 @@ onMounted(() => {
   <div>
     <h1>vue@{{ version }}</h1>
     <p>
-      <button @click="data.value = '123'">
+      <button @click="data.value = Math.random()">
         设值为 string
       </button>
-      <button @click="data.value = { abc: 124124124124124124124n }">
+      <button @click="data.value = { abc: Math.random() }">
         设值为 JSON
       </button>
+      <button @click="data.value.number = Math.random()">
+        改变属性
+      </button>
       <button @click="data.value = undefined">
         清空
       </button>