this is children component
<script setup>
import { computed, ref, watch, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import dataSource from '../../data.json'
import destinationApi from '@/services/destinationApi'
console.log(dataSource)
const route = useRoute()
watchEffect(() => {
console.log(route.params)
})
const destination = ref(null)
const slug = computed(() => route.params.slug)
watch(
() => slug.value,
async () => {
try {
const res = await destinationApi.getDestination(slug.value)
destination.value = res.data
} catch (error) {
console.log(error.message)
}
},
{ immediate: true },
)
</script>
<template>
<section class="destination" v-if="destination">
<h1>{{ destination.name }}</h1>
<div class="destination-details">
<img :src="/images/${destination.image}" :alt="destination.name" />
<p>{{ destination.description }}</p>
</div>
</section>
</template>
and this is parent Components
<script setup>
import DestinationComp from '@/components/DestinationComp.vue'
</script>
<template>
<Suspense>
<DestinationComp />
<template #fallback>
<h1>..loading</h1>
</template>
</Suspense>
</template>
when im using suspense fallback does not showing i know fetching should be top level code but then page does not changing when route.param is changing, is there some solution could you help me ?
