trigger re single class

src/views/pages/ApplicationBrowser.vue

@@ -9,9 +9,9 @@
         <div class="col-span-4">
             <div class="card folder-tree ">
                 <h5>File Browser</h5>
-
-                <Tree :value="nodes" @nodeSelect="onNodeSelect"  selectionMode="single" :expandedKeys="expandedKeys" :filter="true" filterMode="lenient" class="w-full"></Tree>
-
+                
+                <Tree :value="nodes" @nodeSelect="onNodeSelect"  selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
+ 
             </div>
         </div>
         <div class="col-span-8">
@@ -72,7 +72,7 @@ function reloadPage() {
         fetchApplicationData();
 }
 
-watch(() => userPrefStore.getSelApp, reloadPage, { immediate: true });
+watch(() => userPrefStore.getSelApp, reloadPage);
 
 function onNodeSelect(e){
     if(e.icon == "pi pi-fw pi-file"){
@@ -97,7 +97,7 @@ const collapseAll = () => {
     expandedKeys.value = {};
 };
 
-const expandNode = (node) => {
+/*const expandNode = (node) => {
     expandedKeys.value[node.key] = true;
 
     if (node.children && node.children.length) {
@@ -105,6 +105,24 @@ const expandNode = (node) => {
             expandNode(child);
         }
     }
+};*/
+
+const expandNode = (node) => {
+    if (node.children && node.children.length) {
+        //node.children.forEach(child => {
+            expandedKeys.value[node.children.key] = true;
+       // });
+    }
+    expandedKeys.value = { ...expandedKeys.value };
+};
+ 
+const collapseNode = (node) => {
+    if (node.children && node.children.length) {
+       node.children.forEach(child => {
+            delete expandedKeys.value[child.key];
+        });
+    }
+    expandedKeys.value = { ...expandedKeys.value };
 };
 
 </script>