parent dialog: use computed prop for reftypes

src/components/TheParent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from '@/store'
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import TheTreeDialog from './TheTreeDialog.vue';
 import VCollaps from './VCollaps.vue';
 import { UABaseNode } from '@/ua/UABaseNode';
@@ -37,11 +37,10 @@ function filter(fnode: UABaseNode) {
   }
   return false;
 }
-
-function getRefTypes():UABaseNode[] {
-  let list=(store.addressSpace?.getSubTreeAsList("ns=0;i="+ReferenceTypeIds.HierarchicalReferences)) as UAReferenceType[];
+const refTypes = computed(():UABaseNode[]  => {
+  const list=(store.addressSpace?.getSubTreeAsList("ns=0;i="+ReferenceTypeIds.HierarchicalReferences)) as UAReferenceType[];
   return list.filter((node) => node.isAbstract==false);
-}
+})
 </script>
 
 <template>
@@ -60,7 +59,7 @@ function getRefTypes():UABaseNode[] {
           <span class="input-group-text" id="inputGroup-sizing-default">Reference</span>
         </div>
         <select class="form-select" aria-label="Selected ref. type" v-model="selectedRefType" >
-          <option v-for="option in getRefTypes()" :value="option.browseName" v-bind:key="option.browseName">
+          <option v-for="option in refTypes" :value="option.browseName" v-bind:key="option.browseName">
             {{ option.displayName }}
           </option>
         </select>