diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index fb20338..24f0295 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -45,32 +45,38 @@
     TableFans,
     TableBmcManager,
     TableChassis,
-    TableProcessors
+    TableProcessors,
   },
   mixins: [LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if user navigates away from page
+    // before requests complete
+    this.hideLoader();
+    next();
+  },
   created() {
     this.startLoader();
-    const systemTablePromise = new Promise(resolve => {
+    const systemTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::system::complete', () => resolve());
     });
-    const bmcManagerTablePromise = new Promise(resolve => {
+    const bmcManagerTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::bmcManager::complete', () => resolve());
     });
-    const chassisTablePromise = new Promise(resolve => {
+    const chassisTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::chassis::complete', () => resolve());
     });
-    const dimmSlotTablePromise = new Promise(resolve => {
+    const dimmSlotTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::dimmSlot::complete', () => resolve());
     });
-    const fansTablePromise = new Promise(resolve => {
+    const fansTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::fans::complete', () => resolve());
     });
-    const powerSuppliesTablePromise = new Promise(resolve => {
+    const powerSuppliesTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::powerSupplies::complete', () =>
         resolve()
       );
     });
-    const processorsTablePromise = new Promise(resolve => {
+    const processorsTablePromise = new Promise((resolve) => {
       this.$root.$on('hardwareStatus::processors::complete', () => resolve());
     });
     // Combine all child component Promises to indicate
@@ -82,14 +88,8 @@
       dimmSlotTablePromise,
       fansTablePromise,
       powerSuppliesTablePromise,
-      processorsTablePromise
+      processorsTablePromise,
     ]).finally(() => this.endLoader());
   },
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if user navigates away from page
-    // before requests complete
-    this.hideLoader();
-    next();
-  }
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index e7ddf53..783cd64 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -9,7 +9,7 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
@@ -21,12 +21,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6">
@@ -153,30 +153,30 @@
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand'
+          tdClass: 'table-row-expand',
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
-          formatter: this.tableFormatter
-        }
-      ]
+          formatter: this.tableFormatter,
+        },
+      ],
     };
   },
   computed: {
@@ -189,13 +189,13 @@
       } else {
         return [];
       }
-    }
+    },
   },
   created() {
     this.$store.dispatch('bmc/getBmcInfo').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardwareStatus::bmcManager::complete');
     });
-  }
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 0b56a9f..fbdadcd 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -9,7 +9,7 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandChassis"
@@ -21,12 +21,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -82,42 +82,42 @@
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand'
+          tdClass: 'table-row-expand',
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
-          formatter: this.tableFormatter
-        }
-      ]
+          formatter: this.tableFormatter,
+        },
+      ],
     };
   },
   computed: {
     chassis() {
       return this.$store.getters['chassis/chassis'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('chassis/getChassisInfo').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardwareStatus::chassis::complete');
     });
-  }
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index babb8d0..2c90163 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -31,7 +31,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandDimms"
@@ -43,12 +43,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -84,7 +84,7 @@
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -93,35 +93,35 @@
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -132,7 +132,7 @@
     },
     dimms() {
       return this.$store.getters['memory/dimms'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('memory/getDimms').finally(() => {
@@ -148,7 +148,7 @@
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 9ee9291..6ade34b 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -31,7 +31,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandFans"
@@ -43,12 +43,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -83,7 +83,7 @@
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -92,35 +92,35 @@
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -131,7 +131,7 @@
     },
     fans() {
       return this.$store.getters['fan/fans'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('fan/getFanInfo').finally(() => {
@@ -147,7 +147,7 @@
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index bd5cedb..91c26a7 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -31,7 +31,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandPowerSupplies"
@@ -43,12 +43,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -106,7 +106,7 @@
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -115,35 +115,35 @@
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -154,7 +154,7 @@
     },
     powerSupplies() {
       return this.$store.getters['powerSupply/powerSupplies'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('powerSupply/getPowerSupply').finally(() => {
@@ -170,7 +170,7 @@
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index de77243..fba4cc4 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -30,7 +30,7 @@
       @filtered="onFiltered"
     >
       <!-- Expand button -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandProcessors"
@@ -41,11 +41,11 @@
         </b-button>
       </template>
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -113,7 +113,7 @@
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
-    SearchFilterMixin
+    SearchFilterMixin,
   ],
   data() {
     return {
@@ -122,35 +122,35 @@
           key: 'expandRow',
           label: '',
           tdClass: 'table-row-expand',
-          sortable: false
+          sortable: false,
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
           sortable: true,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
           formatter: this.tableFormatter,
-          sortable: true
+          sortable: true,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
           formatter: this.tableFormatter,
-          sortable: true
-        }
+          sortable: true,
+        },
       ],
-      searchTotalFilteredRows: 0
+      searchTotalFilteredRows: 0,
     };
   },
   computed: {
@@ -161,7 +161,7 @@
     },
     processors() {
       return this.$store.getters['processors/processors'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
@@ -172,7 +172,7 @@
   methods: {
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index da4d546..fc65fbf 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -9,7 +9,7 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <!-- Expand chevron icon -->
-      <template v-slot:cell(expandRow)="row">
+      <template #cell(expandRow)="row">
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandSystem"
@@ -21,12 +21,12 @@
       </template>
 
       <!-- Health -->
-      <template v-slot:cell(health)="{ value }">
+      <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
 
-      <template v-slot:row-details="{ item }">
+      <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
             <b-col sm="6" xl="4">
@@ -94,42 +94,42 @@
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand'
+          tdClass: 'table-row-expand',
         },
         {
           key: 'id',
           label: this.$t('pageHardwareStatus.table.id'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'health',
           label: this.$t('pageHardwareStatus.table.health'),
           formatter: this.tableFormatter,
-          tdClass: 'text-nowrap'
+          tdClass: 'text-nowrap',
         },
         {
           key: 'partNumber',
           label: this.$t('pageHardwareStatus.table.partNumber'),
-          formatter: this.tableFormatter
+          formatter: this.tableFormatter,
         },
         {
           key: 'serialNumber',
           label: this.$t('pageHardwareStatus.table.serialNumber'),
-          formatter: this.tableFormatter
-        }
-      ]
+          formatter: this.tableFormatter,
+        },
+      ],
     };
   },
   computed: {
     systems() {
       return this.$store.getters['system/systems'];
-    }
+    },
   },
   created() {
     this.$store.dispatch('system/getSystem').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardwareStatus::system::complete');
     });
-  }
+  },
 };
 </script>