Empty ref('') variable after assigning .value to this variable in composition API vue 3

I'm making a request with a ref property, after I assign a string to a ref<string>('') the .value it is empty in the request when I'm calling the method inside the onMounted(), why is that possible? but when I print in console before the request the variable it shows the expected value. I share the code

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import CustomTable from './CustomTable.vue'
const router = useRouter()
let today: Date
let fechaColaEmails = ref('')
//llamada http
const url = `${import.meta.env.VITE_APP_ROOT_API}${
import.meta.env.VITE_BACKEND_DASHBOARD_DESA
}/emails?fecha=${fechaColaEmails.value}`
async function pedirEmails() {
try {
console.log('dentro del metodo pedir emails: ' + url)
const { data } = await axios.get<any[]>(url)
emails.value = data
} catch (error) {
console.log(error)
}
}
async function submitFecha(fecha: any) {
let fechT: string = fecha.target.value
let arrayFecha = fechT.split('-')
fechaColaEmails.value = arrayFecha[2] + '/' + arrayFecha[1] + '/' + arrayFecha[0]
console.log('hola')
}
onMounted(async () => {
today = new Date()
let dd = String(today.getDate())
let mm = String(today.getMonth() + 1) //January is 0!
let yyyy = today.getFullYear()
fechaColaEmails.value = dd + '/' + mm + '/' + yyyy
console.log('onMounted: ', fechaColaEmails.value)
console.log('esta es la peticion en onmounted: ' + url)
await pedirEmails()
console.log('esta es la peticion despues de pedirla: ' + url)
})
function ruta(event: number): void {
router.push({ name: 'detallesemail', params: { contador: event } })
}
let emails = ref([
{  }
])
</script>

It looks like you assume url is a computed property, that changes when you change fechaColaEmails. But it is just a string:

let fechaColaEmails = ref('')
const url = `${import.meta.env.VITE_APP_ROOT_API}${
import.meta.env.VITE_BACKEND_DASHBOARD_DESA
}/emails?fecha=${fechaColaEmails.value}` // <---- fechaColaEmails.value will be resolved immediatelly to ''

If you want to make it responsive, you need to put it into an actual computed property:

const url = computed(() => `...fecha=${fechaColaEmails.value}`)

Now url is recomputed everytime fechaColaEmails change.

You might want to check if it is enough to build the url only when you actually need it, there is no point in making values reactive if you don't need to react to them:

async function pedirEmails() {
const url = `...`
try {
const { data } = await axios.get<any[]>(url)
...
}