complete migration to vue 3

src/App.vue

@@ -8,6 +8,8 @@
   </div>
 </template>
 <script>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NavBar from '@/components/NavBar'
 import TimeWindows from '@/components/TimeWindows'
 import Chart from '@/components/Chart'
@@ -17,38 +19,39 @@ export default {
     TimeWindows,
     Chart
   },
-  data() {
-    return {
-      type: null,
-      window: {}
-    }
-  },
-  created() {
-    const { type, window } = this.$route.params
-    if (type) this.type = type
-    if (window) this.window = window
-  },
-  methods: {
-    setType(type) {
-      this.type = type
-      this.updateRoute()
-    },
-    setWindow(window) {
-      this.window = window
-      this.updateRoute()
-    },
-    updateRoute() {
-      if (this.type) {
+  setup() {
+    const type = ref(null)
+    const window = ref({})
+    const route = useRoute()
+    const router = useRouter()
+    if (route.params.type) type.value = route.params.type
+    if (route.params.window) window.value = route.params.window
+    const updateRoute = () => {
+      if (type.value) {
         const route = {
           name: 'view',
           params: {
-            type: this.type,
-            window: this.window.label ? this.window.label.replace(' ', '-') : undefined
+            type: type.value,
+            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
           }
         }
-        this.$router.push(route)
+        router.push(route)
       }
     }
+    const setType = (newType) => {
+      type.value = newType
+      updateRoute()
+    }
+    const setWindow = (newWindow) => {
+      window.value = newWindow
+      updateRoute()
+    }
+    return {
+      type,
+      window,
+      setType,
+      setWindow
+    }
   }
 }
 </script>