Waiting for Query Params before Sending Api Call - vue.js

Question

Trying to use some url parameters in an API call. Eventually my plan is to allow the user to put in a Zip Code and I will transform the zip code into latitude and longitude. This is intended to be a digital signage solution where the user can set up a URL in their signage system and include their location as part of the url.
Here's what I have for my created function in Vue. Admittedly, I am both a novice at Vue and still trying to fully understand async await. I thought that I did, but this is inconsistently not waiting for the latitude and longitude params from the query before sending the API call.
async created() {
const lat = await this.$route.query.lat;
const lon = await this.$route.query.lon;
try {
const response = await axios.get(
'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lon + '&units=imperial&exclude=minutely,alerts&appid=' + process.env.VUE_APP_APIKEY,
{ headers: {"Content-Type": "application/json"} }
)
this.weather = response.data
} catch (err) {
console.log(err.toJSON());
}
}
Current Updated code using setup
setup() {
const route = useRoute();
let lat = ref(0);
let lon = ref(0);
let weather = ref(null);
watchEffect(() => {
lat.value = route.query.lat;
console.log(lat.value);
lon.value = route.query.lon;
console.log(lon.value);
axios.get(
'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat.value + '&lon=' + lon.value + '&units=imperial&exclude=minutely,alerts&appid=' + process.env.VUE_APP_APIKEY,
{ headers: {"Content-Type": "application/json"} }
).then( response => {
weather.value = response.data;
console.log(weather);
}).catch(e => {
console.log(e);
});
});
return {
lat, lon, weather
}
},

Answer 1

I would recommend doing this in either the watch function (both in the options and the composition API) or a watchEffect (only in the composition API), the latter is less complicated. It just listens to changes on reactive properties.
<script setup>
import { useRoute } from 'vue-router';
import { ref, watchEffect } from 'vue';
const route = useRoute();
const lat = ref(0);
const long = ref(0);
watchEffect(() => {
lat.value = route.query.lat;
lng.value = route.query.lng;
});
</script>
You will need to better safeguard the assignments!