Vue 3 Upgrade (#1900)

## Description

Upgrades to Vue 3 and necessary associated dependencies. Also fixes some
issues with the layout and adds validation for object detection models.

Closes #885, closes #1943, closes #1449.
## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2024.3.1
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

---------

Co-authored-by: Matt M <matthew.morley.ca@gmail.com>
Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com>
Co-authored-by: samfreund <techguy763@gmail.com>

photon-client/src/components/settings/MetricsCard.vue

@@ -120,17 +120,17 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <v-card dark class="mb-3" style="background-color: #006492">
+  <v-card class="mb-3" style="background-color: #006492">
     <v-card-title class="pl-6" style="display: flex; justify-content: space-between">
       <span class="pt-2 pb-2">Stats</span>
-      <v-btn text @click="fetchMetrics">
-        <v-icon left class="open-icon">mdi-reload</v-icon>
+      <v-btn variant="text" @click="fetchMetrics">
+        <v-icon start class="open-icon">mdi-reload</v-icon>
         Last Fetched: {{ metricsLastFetched }}
       </v-btn>
     </v-card-title>
     <v-card-text class="pa-6 pt-0 pb-3">
       <v-card-subtitle class="pa-0" style="font-size: 16px">General Metrics</v-card-subtitle>
-      <v-simple-table class="metrics-table mt-3">
+      <v-table class="metrics-table mt-3">
         <thead>
           <tr>
             <th
@@ -163,11 +163,11 @@ onBeforeMount(() => {
             </td>
           </tr>
         </tbody>
-      </v-simple-table>
+      </v-table>
     </v-card-text>
     <v-card-text class="pa-6 pt-4">
       <v-card-subtitle class="pa-0 pb-1" style="font-size: 16px">Hardware Metrics</v-card-subtitle>
-      <v-simple-table class="metrics-table mt-3">
+      <v-table class="metrics-table mt-3">
         <thead>
           <tr>
             <th
@@ -201,7 +201,7 @@ onBeforeMount(() => {
             </td>
           </tr>
         </tbody>
-      </v-simple-table>
+      </v-table>
     </v-card-text>
   </v-card>
 </template>
@@ -263,7 +263,7 @@ onBeforeMount(() => {
   text-decoration-color: #ffd843;
 }
 
-.v-data-table {
+.v-table {
   thead,
   tbody {
     background-color: #006492;