Convert all view components to use Composition API

might as well start getting used to this new hotness

src/views/WeatherView.vue

@@ -1,66 +1,63 @@
 <script setup>
-import { mapStores } from 'pinia'
+import { ref, computed, onActivated } from 'vue'
+import { useRouter } from 'vue-router'
 import { useWeatherStore } from '../stores/weather'
 import { useLocationStore } from '../stores/location'
-</script>
 
-<script>
-export default {
 
-    data() {
-        return {
-            coordinates: null,
-            alerts: null,
-        }
-    },
+const router = useRouter()
+const locationStore = useLocationStore()
+const weatherStore = useWeatherStore()
 
-    computed: {
-        ...mapStores(useWeatherStore, useLocationStore),
+const coordinates = ref(null)
+const alerts = ref(null)
 
-        panelHeadingTitle() {
-            if (!this.weatherStore.forecast) {
-                return "Forecast"
-            }
 
-            let generated = new Date(this.weatherStore.forecast.properties.generatedAt)
-            generated = generated.toLocaleTimeString('en-US', {timeStyle: 'short'})
-            return `Forecast @ ${generated}`
-        },
-    },
+const panelHeadingTitle = computed(() => {
+    if (!weatherStore.forecast) {
+        return "Forecast"
+    }
 
-    activated() {
-        this.fetchWeather()
-    },
+    let generated = new Date(weatherStore.forecast.properties.generatedAt)
+    generated = generated.toLocaleTimeString('en-US', {timeStyle: 'short'})
+    return `Forecast @ ${generated}`
+})
 
-    methods: {
 
-        coordinatesUpdated(coordinates) {
-            this.weatherStore.clearWeather()
-            this.weatherStore.setCoordinates(coordinates)
-            this.fetchWeather()
-        },
+onActivated(() => {
+    fetchWeather()
+})
 
-        async fetchWeather() {
 
-            if (!this.weatherStore.coordinates) {
-                this.$router.push('/')
-                return
-            }
-
-            const forecast = await this.weatherStore.getForecast()
-            this.coordinates = this.weatherStore.coordinates
-            this.alerts = this.weatherStore.alerts
-        },
-
-        getShortForecast(period) {
-            return period.shortForecast.replace(/Showers And Thunderstorms/g, 'T-storms')
-        },
-
-        showHourly(period) {
-            this.$router.push('/hourly')
-        },
-    },
+function coordinatesUpdated(coords) {
+    weatherStore.clearWeather()
+    weatherStore.setCoordinates(coords)
+    fetchWeather()
 }
+
+
+async function fetchWeather() {
+
+    if (!weatherStore.coordinates) {
+        router.push('/')
+        return
+    }
+
+    const forecast = await weatherStore.getForecast()
+    coordinates.value = weatherStore.coordinates
+    alerts.value = weatherStore.alerts
+}
+
+
+function getShortForecast(period) {
+    return period.shortForecast.replace(/Showers And Thunderstorms/g, 'T-storms')
+}
+
+
+function showHourly(period) {
+    router.push('/hourly')
+}
+
 </script>
 
 <template>