use computed props in treeview to reduce update time

src/components/TheAddressspace.vue

@@ -21,7 +21,7 @@ const selNode=ref(UABaseNode.nullBaseNode);
       <ul>
         <TheContextMenu>
           <TreeItem class="item" v-if="store.rootNode != null" :model="store.rootNode"
-            @select-node="(node) => selectNode(node)" :selected-node="selNode" :filter-func="(node: UABaseNode) => { return false }">
+            @select-node="(node: UABaseNode) => selectNode(node)" :selected-node="selNode">
           </TreeItem>
         </TheContextMenu>
       </ul>

src/components/TreeItem.vue

@@ -2,11 +2,11 @@
 import { UABaseNode } from '@/ua/UABaseNode';
 import { ref, computed } from 'vue'
 
-const props = defineProps({
+const props = defineProps<{
   model: UABaseNode,
-  filterFunc: Function,
+  filterFunc?: Function,
   selectedNode: UABaseNode
-})
+}>();
 
 const isOpen = ref(false)
 const isFolder = computed(() => {
@@ -14,18 +14,31 @@ const isFolder = computed(() => {
   return children && children.length;
 })
 
+const isSelected = computed(() => {
+  return (props.selectedNode?.nodeId.toString()===props.model?.nodeId.toString())
+})
+
+const isFiltered = computed(() => {
+  if(!props.filterFunc)
+    return false;
+  return props.filterFunc(props.model);
+})
+
+const children = computed(() => {
+  return props.model.getChildren();
+})
+
 function toggle() {
   isOpen.value = !isOpen.value
 }
-
 </script>
 
 <template>
   <li>
-    <div v-if="model && filterFunc"  :class="{ bold: isFolder }">
+    <div v-if="model"  :class="{ bold: isFolder }">
       <span v-if="isFolder" @click="toggle">[{{ isOpen ? '-' : '+' }}]</span>
-      <span @click.stop="$emit('selectNode', model)"  class="itemtext" :class="[(filterFunc(model)?'disabled':''), 
-          (selectedNode?.nodeId.toString()===model?.nodeId.toString())?'selected':'' ]">
+      <span @click.stop="$emit('selectNode', model)"  class="itemtext" :class="[(isFiltered?'disabled':''), 
+         isSelected?'selected':'' ]">
         {{ model.displayName }}
       </span>
     </div>
@@ -34,10 +47,10 @@ function toggle() {
           class="item"
           :filter-func = "$props.filterFunc"
           @select-node="(node: UABaseNode) => $emit('selectNode', node)"
-          v-for="child in model.getChildren()"
+          v-for="child in children"
           v-bind:key="child.nodeId.toString()"
           :model="child"
-          :selectedNode="selectedNode">
+          :selectedNode="$props.selectedNode">
         </TreeItem>
     </ul>
   </li>