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/cameras/CameraControlCard.vue

@@ -91,16 +91,16 @@ const expanded = ref([]);
 </script>
 
 <template>
-  <v-card dark style="background-color: #006492">
+  <v-card style="background-color: #006492">
     <v-card-title>Camera Control</v-card-title>
     <v-card-text>
       <v-btn color="secondary" @click="fetchSnapshots">
-        <v-icon left class="open-icon"> mdi-folder </v-icon>
+        <v-icon start class="open-icon"> mdi-folder </v-icon>
         <span class="open-label">Show Saved Snapshots</span>
       </v-btn>
     </v-card-text>
     <v-dialog v-model="showSnapshotViewerDialog">
-      <v-card dark class="pt-3 pl-5 pr-5" color="primary" flat>
+      <v-card class="pt-3 pl-5 pr-5" color="primary" flat>
         <v-card-title> View Saved Frame Snapshots </v-card-title>
         <v-divider />
         <v-card-text v-if="imgData.length === 0" style="font-size: 18px; font-weight: 600" class="pt-4">
@@ -110,22 +110,33 @@ const expanded = ref([]);
           <v-data-table
             v-model:expanded="expanded"
             :headers="[
-              { text: 'Snapshot Name', value: 'snapshotShortName', sortable: false },
-              { text: 'Camera Unique Name', value: 'cameraUniqueName' },
-              { text: 'Camera Nickname', value: 'cameraNickname' },
-              { text: 'Stream Type', value: 'streamType' },
-              { text: 'Time Created', value: 'timeCreated' },
-              { text: 'Actions', value: 'actions', sortable: false }
+              { title: 'Snapshot Name', key: 'snapshotShortName', sortable: false },
+              { title: 'Camera Unique Name', key: 'cameraUniqueName' },
+              { title: 'Camera Nickname', key: 'cameraNickname' },
+              { title: 'Stream Type', key: 'streamType' },
+              { title: 'Time Created', key: 'timeCreated' },
+              { title: 'Actions', key: 'actions', sortable: false }
             ]"
             :items="imgData"
-            group-by="cameraUniqueName"
+            :group-by="[{ key: 'cameraUniqueName' }]"
             class="elevation-0"
-            item-key="index"
+            item-value="index"
             show-expand
-            expand-icon="mdi-eye"
           >
-            <template #expanded-item="{ headers, item }">
-              <td :colspan="headers.length">
+            <template #item.data-table-expand="{ internalItem, toggleExpand }">
+              <v-btn
+                icon="mdi-eye"
+                class="text-none"
+                color="medium-emphasis"
+                size="small"
+                variant="text"
+                slim
+                @click="toggleExpand(internalItem)"
+              ></v-btn>
+            </template>
+
+            <template #expanded-row="{ item, columns }">
+              <td :colspan="columns.length">
                 <div style="display: flex; justify-content: center; width: 100%">
                   <img :src="item.snapshotSrc" alt="snapshot-image" class="snapshot-preview pt-2 pb-2" />
                 </div>
@@ -135,7 +146,7 @@ const expanded = ref([]);
             <template #item.actions="{ item }">
               <div style="display: flex; justify-content: center">
                 <a :download="item.snapshotName" :href="item.snapshotSrc">
-                  <v-icon small> mdi-download </v-icon>
+                  <v-icon size="small"> mdi-download </v-icon>
                 </a>
               </div>
             </template>
@@ -157,7 +168,7 @@ const expanded = ref([]);
 .v-btn {
   width: 100%;
 }
-.v-data-table {
+.v-table {
   text-align: center;
   background-color: #006492 !important;