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/dashboard/StreamConfigCard.vue

@@ -3,19 +3,7 @@ import { computed } from "vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 
-const props = defineProps<{
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: number[];
-}>();
-
-const emit = defineEmits<{
-  (e: "input", value: number[]): void;
-}>();
-
-const localValue = computed({
-  get: () => props.value,
-  set: (v) => emit("input", v)
-});
+const value = defineModel<number[]>();
 
 const processingMode = computed<number>({
   get: () => (useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled ? 1 : 0),
@@ -32,14 +20,18 @@ const processingMode = computed<number>({
     :disabled="useCameraSettingsStore().isDriverMode || useStateStore().colorPickingMode"
     class="mt-3"
     color="primary"
-    style="height: 100%; display: flex; flex-direction: column"
+    style="flex-grow: 1; display: flex; flex-direction: column"
   >
     <v-row class="pa-3 pb-0 align-center">
       <v-col class="pa-4">
         <p style="color: white">Processing Mode</p>
-        <v-btn-toggle v-model="processingMode" mandatory dark class="fill">
-          <v-btn color="secondary" :disabled="!useCameraSettingsStore().hasConnected">
-            <v-icon left>mdi-square-outline</v-icon>
+        <v-btn-toggle v-model="processingMode" mandatory base-color="surface-variant" class="fill w-100">
+          <v-btn
+            color="secondary"
+            :disabled="!useCameraSettingsStore().hasConnected"
+            class="w-50"
+            prepend-icon="mdi-square-outline"
+          >
             <span>2D</span>
           </v-btn>
           <v-btn
@@ -47,8 +39,9 @@ const processingMode = computed<number>({
             :disabled="
               !useCameraSettingsStore().hasConnected || !useCameraSettingsStore().isCurrentVideoFormatCalibrated
             "
+            class="w-50"
+            prepend-icon="mdi-cube-outline"
           >
-            <v-icon left>mdi-cube-outline</v-icon>
             <span>3D</span>
           </v-btn>
         </v-btn-toggle>
@@ -57,13 +50,13 @@ const processingMode = computed<number>({
     <v-row class="pa-3 pt-0 align-center">
       <v-col class="pa-4 pt-0">
         <p style="color: white">Stream Display</p>
-        <v-btn-toggle v-model="localValue" :multiple="true" mandatory dark class="fill">
-          <v-btn color="secondary" class="fill">
-            <v-icon left class="mode-btn-icon">mdi-import</v-icon>
+        <v-btn-toggle v-model="value" :multiple="true" mandatory base-color="surface-variant" class="fill w-100">
+          <v-btn color="secondary" class="fill w-50">
+            <v-icon start class="mode-btn-icon">mdi-import</v-icon>
             <span class="mode-btn-label">Raw</span>
           </v-btn>
-          <v-btn color="secondary" class="fill">
-            <v-icon left class="mode-btn-icon">mdi-export</v-icon>
+          <v-btn color="secondary" class="fill w-50">
+            <v-icon start class="mode-btn-icon">mdi-export</v-icon>
             <span class="mode-btn-label">Processed</span>
           </v-btn>
         </v-btn-toggle>
@@ -73,14 +66,8 @@ const processingMode = computed<number>({
 </template>
 
 <style scoped>
-.v-btn-toggle.fill {
-  width: 100%;
-  height: 100%;
-}
-
-.v-btn-toggle.fill > .v-btn {
-  width: 50%;
-  height: 100%;
+.v-btn--disabled {
+  background-color: #191919 !important;
 }
 
 th {