chore: migrate to script setup style

components/pages/origins/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="isAuthenticated">
+  <div :key="isAuthenticated ? 'true' : 'false'">
     <v-container fluid grid-list-md class="app-fade-in">
       <v-layout row wrap>
         <v-flex xs12>
@@ -13,7 +13,7 @@
                 <template #activator="{ on }">
                   <v-icon
                     v-on="on"
-                    @click="fetchAddress()"
+                    @click="fetchAddressFn()"
                   >
                     mdi-crosshairs-gps
                   </v-icon>
@@ -27,7 +27,7 @@
                   <v-icon
                     :disabled="!origin"
                     v-on="on"
-                    @click="saveOrigin(origin)"
+                    @click="saveOriginFn(origin)"
                   >
                     mdi-bookmark-plus-outline
                   </v-icon>
@@ -44,7 +44,7 @@
             <template #activator="{ on }">
               <v-icon
                 v-on="on"
-                @click="removeOrigin(o)"
+                @click="removeOriginFn(o)"
               >
                 mdi-delete-outline
               </v-icon>
@@ -65,8 +65,8 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { computed, defineComponent, ref } from 'vue'
+<script setup lang='ts'>
+import { computed, ref } from 'vue'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
@@ -77,49 +77,34 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
-export default defineComponent({
-  name: 'OriginsPage',
-  setup () {
-    const state = useState()
-    const { t } = useTranslation()
-    state.setTitle(t('app.links.origins'))
-    const { isAuthenticated } = useAuth()
-    const { result, loading, refetch } = useFindOriginsQuery()
-    const origins = computed(() => result.value?.origins ?? [])
-    const snackbar = ref({ active: false, color: 'success', text: '' })
-    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
-    const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
-    const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
-    const origin = ref('')
-    const fetchAddressFn = () => {
-      if (window.navigator) {
-        window.navigator.geolocation.getCurrentPosition((pos) => {
-          load()
-          doFetchAddress({
-            latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          })?.then((res) => {
-            origin.value = res.data.address
-          })
-        })
-      }
-    }
-    const saveOriginFn = (o: string) =>
-      doSaveOrigin({ origin: o }).then(() => {
-        refetch()
-        origin.value = ''
+const state = useState()
+const { t } = useTranslation()
+state.setTitle(t('app.links.origins'))
+const { isAuthenticated } = useAuth()
+const { result, refetch } = useFindOriginsQuery()
+const origins = computed(() => result.value?.origins ?? [])
+const snackbar = ref({ active: false, color: 'success', text: '' })
+const { mutate: doSaveOrigin } = useSaveOriginMutation({})
+const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
+const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
+const origin = ref('')
+const fetchAddressFn = () => {
+  if (window.navigator) {
+    window.navigator.geolocation.getCurrentPosition((pos) => {
+      load()
+      doFetchAddress({
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+      })?.then((res) => {
+        origin.value = res.data.address
       })
-    const removeOriginFn = (o: string) =>
-      doRemoveOrigin({ origin: o }).then(() => refetch())
-    return {
-      isAuthenticated,
-      loading,
-      origins,
-      snackbar,
-      origin,
-      saveOrigin: saveOriginFn,
-      removeOrigin: removeOriginFn,
-      fetchAddress: fetchAddressFn
-    }
+    })
   }
-})
+}
+const saveOriginFn = (o: string) =>
+  doSaveOrigin({ origin: o }).then(() => {
+    refetch()
+    origin.value = ''
+  })
+const removeOriginFn = (o: string) =>
+  doRemoveOrigin({ origin: o }).then(() => refetch())
 </script>