upgrade to Vue 3.4.3

src/components/Main.vue

@@ -1,31 +1,30 @@
 <template>
   <div id="app">
-    <NavBar :activeType="activeType" @set-type="setType"></NavBar>
+    <NavBar v-model="activeType"></NavBar>
     <section class="section">
-      <TimeWindows :windows="windows" :active-window="activeWindow" @set-window="setWindow"></TimeWindows>
+      <TimeWindows :windows="windows" v-model="activeWindow"></TimeWindows>
       <Chart :active-window="activeWindow" :active-type="activeType"></Chart>
     </section>
     <router-view></router-view>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
 import { windows } from '@/utils/helpers'
-import type { Window } from '@/utils/types'
-import type { navType } from '@/utils/types'
+import type { Window, NavType } from '@/utils/types'
 
 const defaultWindow = windows[1]
 
-const activeType = ref<navType | null>(null)
+const activeType = ref<NavType>()
 const activeWindow = ref<Window>(defaultWindow)
 
 const router = useRouter()
 const route = useRoute()
-if (route.params.type) activeType.value = route.params.type as navType
+if (route.params.type) activeType.value = route.params.type as NavType
 if (route.params.window) {
   activeWindow.value = windows.find((w) => w.label === route.params.window) || defaultWindow
 }
@@ -43,14 +42,7 @@ const updateRoute = () => {
   }
 }
 
-const setType = (newType: navType) => {
-  activeType.value = newType
-  updateRoute()
-}
-const setWindow = (newWindow: Window) => {
-  activeWindow.value = newWindow
-  updateRoute()
-}
+watch([activeWindow, activeType], () => updateRoute())
 </script>
 <style scoped>
 #app {