Hydration error I can not figure out

const slug = computed(() => route.params.slug);

const specificLocation = ref();
watch(slug, async () => {
    console.log("slug changed", slug.value);
    if (slug.value.length === 3) {
    const { data: location } = await useLazyFetch(`/api/v2/locations/search`, {
        params: {
            countryCode: slug.value[0],
            cityName: slug.value[1],
            locationName: slug.value[2],
        }
    });

    console.log("Location updated")
    specificLocation.value = location.value;
}
}, {immediate: true})

<div v-if="slug !== ''" class="w-full">
                    <div v-if="specificLocation">
                        <h1 class="text-white text-left w-full font-bold text-xl">{{ specificLocation.location.name }}
                        </h1>
                        <!-- <h2 class="text-gray-300 text-left w-full text-sm">{{ specificLocation.cityName }}</h2>
                        <ClientOnly>
                            <p id="richtext" class="text-white text-left w-full mt-2" v-html="description"></p>
                        </ClientOnly> -->
                    </div>
                    <div v-else>
                        Loading...
                    </div>
                </div>