Page loads twice

<script lang="ts" setup>
const route = useRoute()
const name = route.params.name as string

const prettyName = name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ' ')

useHead({
    title: prettyName,
    meta: [
        {
            name: 'description',
            content: `Entdecke die Kategorie ${prettyName} im Timolia-Shop!`,
        },
    ],
})

const config = useRuntimeConfig()
const url = `https://headless.tebex.io/api/accounts/${config.public.tebex}/categories?includePackages=1`

const data = await $fetch(url)
const category = computed(() => {
    return data?.data.find((cat: any) => cat.slug === name) || null
})
</script>

<script lang="ts" setup>
const route = useRoute()
const name = route.params.name as string

const prettyName = name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ' ')

useHead({
    title: prettyName,
    meta: [
        {
            name: 'description',
            content: `Entdecke die Kategorie ${prettyName} im Timolia-Shop!`,
        },
    ],
})

const config = useRuntimeConfig()
const url = `https://headless.tebex.io/api/accounts/${config.public.tebex}/categories?includePackages=1`

const data = await $fetch(url)
const category = computed(() => {
    return data?.data.find((cat: any) => cat.slug === name) || null
})
</script>