chore: convert update available component to ts and script setup

src/components/home/TheNavigation.vue

@@ -92,7 +92,7 @@
 	</header>
 </template>
 
-<script setup langs="ts">
+<script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
 import {useStore} from 'vuex'
 import {useRouter} from 'vue-router'

src/components/home/update.vue

@@ -7,47 +7,38 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import {ref} from 'vue'
 
-export default defineComponent({
-	name: 'update',
-	data() {
-		return {
-			updateAvailable: false,
-			registration: null,
-			refreshing: false,
-		}
-	},
-	created() {
-		document.addEventListener('swUpdated', this.showRefreshUI, {once: true})
+const updateAvailable = ref(false)
+const registration = ref(null)
+const refreshing = ref(false)
+
+document.addEventListener('swUpdated', showRefreshUI, {once: true})
 
 if (navigator && navigator.serviceWorker) {
 	navigator.serviceWorker.addEventListener(
 		'controllerchange', () => {
-					if (this.refreshing) return
-					this.refreshing = true
+			if (refreshing.value) return
+			refreshing.value = true
 			window.location.reload()
 		},
 	)
 }
-	},
-	methods: {
-		showRefreshUI(e) {
+
+function showRefreshUI(e) {
 	console.log('recieved refresh event', e)
-			this.registration = e.detail
-			this.updateAvailable = true
-		},
-		refreshApp() {
-			this.updateExists = false
-			if (!this.registration || !this.registration.waiting) {
+	registration.value = e.detail
+	updateAvailable.value = true
+}
+
+function refreshApp() {
+	if (!registration.value || !registration.value.waiting) {
 		return
 	}
 	// Notify the service worker to actually do the update
-			this.registration.waiting.postMessage('skipWaiting')
-		},
-	},
-})
+	registration.value.waiting.postMessage('skipWaiting')
+}
 </script>
 
 <style lang="scss" scoped>