make selectedNode reactive

src/components/TheDetail.vue

@@ -1,44 +1,47 @@
 <script setup lang="ts">
 import { useStore } from '@/util/store'
+import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 const store = useStore()
 
+const { selectedNode } = storeToRefs(store)
+
 const nameSpaceName = computed(() => {
-  if(!store.selectedNode)
+  if(!selectedNode.value)
     return "";
-  let nsIdx=store.selectedNode.nodeId.namespace;
+  let nsIdx=selectedNode.value.nodeId.namespace;
   return store.addressSpace?.nst.getUri(nsIdx);
 })
 </script>
 
 <template>
-    <div class="card">
-    <div class="card-body" v-if="store.selectedNode != null" :elem="store.selectedNode">
+    <div class="card" v-if="selectedNode!=null">
+    <div class="card-body" >
       <h5 class="card-title">Node Editor</h5>
       <div class="card-text" >
         <div class="input-group mb-3">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">DisplayName</span>
           </div>
-          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="store.selectedNode.displayName">
+          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.displayName">
         </div>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">BrowseName</span>
           </div>
-          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="store.selectedNode.browseName">
+          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.browseName">
         </div>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">NodeId</span>
           </div>
-          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="store.selectedNode.nodeId">
+          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.nodeId">
         </div>
         <div class="input-group mb-3">
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-default">NodeClass</span>
           </div>
-          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="store.selectedNode.nodeClass">
+          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.nodeClass">
         </div>
         <div class="input-group mb-3">
           <div class="input-group-prepend">

src/util/store.ts

@@ -2,12 +2,13 @@ import { AddressSpace } from '@/ua/AddressSpace'
 import { UABaseNode } from '@/ua/UABaseNode'
 import type { UANodeSet } from '@/ua/UANodeSet'
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
 export const useStore = defineStore('user', {
   state: () => ({
       addressSpace: null as AddressSpace | null,
       rootNode: null as UABaseNode | null,
-      selectedNode: null as UABaseNode | null,
+      selectedNode: ref<UABaseNode | null>(null),
   }),
   actions: {
     setAddressSpace(as: AddressSpace) {