Switch to the composition API for the geocoder.

js/geocoder.vue

@@ -17,46 +17,47 @@
   />
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import { mdiMagnify } from '@mdi/js';
 import { fetchGeocoding } from './maptiler';
 
-export default {
-  data() {
-    return {
-      error: null,
-      isLoading: false,
-      items: [],
-      mdiMagnify,
-      search: '',
-      selected: null
-    };
+const error = ref(null);
+const isLoading = ref(false);
+const items = ref([]);
+const search = ref('');
+const selected = ref(null);
+
+watch(
+  () => search.value,
+  async (val) => {
+    if (!val) return;
+    error.value = null;
+    isLoading.value = true;
+
+    try {
+      const geocodingResponse = await fetchGeocoding(val);
+      items.value = geocodingResponse.features.map((feature) => {
+        return {
+          title: feature.place_name,
+          value: feature.bbox
+        };
+      });
+    } catch(err) {
+      error.value = err;
+    } finally {
+      isLoading.value = false;
+    }
   },
-  watch: {
-    async search(val) {
-      if (!val) return;
-      this.error = null;
-      this.isLoading = true;
+);
 
-      try {
-        const geocodingResponse = await fetchGeocoding(val);
-        this.items = geocodingResponse.features.map((feature) => {
-          return {
-            title: feature.place_name,
-            value: feature.bbox
-          };
-        });
-      } catch(err) {
-        this.error = err;
-      } finally {
-        this.isLoading = false;
-      }
-    },
-    selected(val) {
-      if (val) {
-        this.$emit('updateBounds', val.value);
-      }
+const emit = defineEmits(['updateBounds']);
+watch(
+  () => selected.value,
+  (val) => {
+    if (val) {
+      emit('updateBounds', val.value);
     }
   }
-}
+);
 </script>