addded single asset

pages/assets.vue

@@ -4,15 +4,15 @@
       <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
     </div>
     <div id="content-body">
-      <ClientSearch v-if="onAssetlist || onCustomerAssetlist"/>
-      <AssetTable v-if="onAssetlist"/>
-      <AssetTableNoClient v-if="onCustomerAssetlist"/>
-      <Asset v-if="onAsset"/>
-      <HardwareSpecifications v-if="onAsset"/>
-      <SoftwareSpecifications v-if="onAsset"/>
-      <NetworkSpecifications v-if="onAsset"/>
-      <AssetSearch v-if="onSolutionlistAsset"/>
-      <AssetSolutionList v-if="onSolutionlistAsset"/>
+      <ClientSearch v-if="onAssetlist || onCustomerAssetlist" />
+      <AssetTable v-if="onAssetlist" />
+      <AssetTableNoClient v-if="onCustomerAssetlist" />
+      <Asset v-if="onAsset" />
+      <HardwareSpecifications v-if="onAsset" />
+      <SoftwareSpecifications v-if="onAsset" />
+      <NetworkSpecifications v-if="onAsset" />
+      <AssetSearch v-if="onSolutionlistAsset" />
+      <AssetSolutionList v-if="onSolutionlistAsset" />
     </div>
   </section>
 </template>
@@ -36,20 +36,27 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
-
-// to render the right components
-const onAssetlist = ref(true)
-const onCustomerAssetlist = ref(false)
-const onAsset = ref(true)
-const onSolutionlistAsset = ref(false)
 </script>
 
 <script>
 export default {
   name: "AssetPage",
+  computed: {
+    onAssetlist() {
+      return this.$store.state.onAssetlist
+    },
+    onCustomerAssetlist() {
+      return this.$store.state.onCustomerAssetlist
+    },
+    onAsset() {
+      return this.$store.state.onAsset
+    },
+    onSolutionlistAsset() {
+      return this.$store.state.onSolutionlistAsset
+    }
+  }
 }
-</script>   
-    
+</script>
     
 <style scoped>
 * {