get updated data

src/App.vue

@@ -8,12 +8,17 @@
     :search-text="searchText"
     @onNodeExpanded="onNodeExpanded"
     @onCheckboxToggle="onCheckboxToggle"
+    @onDataUpdated="onDataUpdated"
   />
+
+  <pre style="position:absolute;right:0;top:0;"><code id="codeBlock"></code></pre>
 </template>
 
 <script>
 import { ref } from 'vue'
 import Tree from './lib/index'
+import prettier from 'https://unpkg.com/prettier@2.3.2/esm/standalone.mjs'
+import parserBabel from 'https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs'
 
 export default {
   components: {
@@ -77,11 +82,20 @@ export default {
       // console.log('checkbox node: ', node)
     }
 
+    const onDataUpdated = updatedData => {
+      document.querySelector('#codeBlock').innerText =
+      prettier.format(JSON.stringify(updatedData), {
+        parser: 'babel',
+        plugins: [parserBabel],
+      })
+    }
+
     return {
       data,
       searchText,
       onNodeExpanded,
       onCheckboxToggle,
+      onDataUpdated,
     }
   },
 }

src/lib/components/Tree.vue

@@ -2,14 +2,15 @@
   <div>
     <ul :style="{'gap': gap + 'px'}">
       <tree-row
-        v-for="node in refNodes"
+        v-for="node in reactiveNodes"
         :ref="'tree-row-' + node.id"
         :key="node.id"
         :node="node"
         :indent-size="indentSize"
         :gap="gap"
-        :expand-row-by-default="refExpandRowByDefault"
+        :expand-row-by-default="reactiveExpandRowByDefault"
         @emitNodeExpanded="onNodeExpanded"
+        @emitOnUpdated="onDataUpdated"
         @emitCheckboxToggle="onCheckboxToggle"
       >
         <template #iconActive>
@@ -70,26 +71,26 @@ export default {
       default: true,
     },
   },
-  emits: ['onNodeExpanded', 'onCheckboxToggle'],
+  emits: ['onNodeExpanded', 'onCheckboxToggle', 'onDataUpdated'],
   setup(props, { emit }) {
     const { searchTree } = useSearch()
     // TODO: the names below should be changed
-    const refNodes = ref(props.nodes)
-    const refExpandRowByDefault = ref(props.expandRowByDefault)
+    const reactiveNodes = ref(props.nodes)
+    const reactiveExpandRowByDefault = ref(props.expandRowByDefault)
 
     onMounted(() => {
-      refNodes.value = initData(refNodes.value)
+      reactiveNodes.value = initData(reactiveNodes.value)
     })
 
     watch(() => props.searchText, () => {
       if (props.searchText !== '') {
-        refNodes.value = searchTree(props.nodes, props.searchText, props.props)
+        reactiveNodes.value = searchTree(props.nodes, props.searchText, props.props)
         if (props.expandAllRowsOnSearch) {
-          refExpandRowByDefault.value = true
+          reactiveExpandRowByDefault.value = true
         }
       } else {
-        refNodes.value = props.nodes
-        refExpandRowByDefault.value = false
+        reactiveNodes.value = props.nodes
+        reactiveExpandRowByDefault.value = false
       }
     })
 
@@ -98,15 +99,20 @@ export default {
     }
 
     const onCheckboxToggle = context => {
-      console.log('updateData(props.nodes, context): ', toRaw(updateData(props.nodes, context)))
+      reactiveNodes.value = updateData(reactiveNodes.value, context)
       emit('onCheckboxToggle', context)
     }
 
+    const onDataUpdated = () => {
+      emit('onDataUpdated', props.nodes)
+    }
+
     return {
       onNodeExpanded,
-      refNodes,
-      refExpandRowByDefault,
+      reactiveNodes,
+      reactiveExpandRowByDefault,
       onCheckboxToggle,
+      onDataUpdated,
     }
   },
 }

src/lib/components/TreeRow.vue

@@ -43,6 +43,7 @@
         :expand-row-by-default="expandRowByDefault"
         :indent-size="indentSize"
         @emitNodeExpanded="emitNodeExpanded"
+        @emitOnUpdated="emitOnUpdated"
         @emitCheckboxToggle="emitCheckboxToggle"
       >
         <template #iconActive>
@@ -61,7 +62,7 @@
 </template>
 
 <script>
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, watch, onUpdated } from 'vue'
 import ArrowRight from './Icons/ArrowRight.vue'
 import ArrowDown from './Icons/ArrowDown.vue'
 
@@ -92,7 +93,7 @@ export default {
       default: false,
     },
   },
-  emits: ['emitNodeExpanded', 'emitCheckboxToggle'],
+  emits: ['emitNodeExpanded', 'emitCheckboxToggle', 'emitOnUpdated'],
   setup(props, { emit }) {
     const reactiveNode = ref(props.node)
 
@@ -120,6 +121,14 @@ export default {
       emit('emitNodeExpanded', node, state)
     }
 
+    const emitOnUpdated = (node, state) => {
+      emit('emitOnUpdated', node, state)
+    }
+
+    onUpdated(() => {
+      emitOnUpdated()
+    })
+
     const toggleCheckbox = node => {
       reactiveNode.value.checked = !reactiveNode.value.checked
       nextTick(()=>{
@@ -137,6 +146,7 @@ export default {
     return {
       toggleExpanded,
       emitNodeExpanded,
+      emitOnUpdated,
       toggleCheckbox,
       emitCheckboxToggle,
       reactiveNode,