Nuxt hydration problem on simple component

I have simple component:

<script setup lang="ts">
import {routes} from '~/service/routes';
</script>
<template>
<nuxt-link :to="routes.home" class="relative shrink-0 cursor-pointer">
<span
class="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col font-['Orbitron:Regular',sans-serif] font-normal items-start relative"
>
<span class="leading-[32px] relative shrink-0 text-[24px] text-nowrap text-white tracking-[2.4px]">COMPETE</span>
<span class="h-[16px] leading-[16px] relative shrink-0 text-[12px] text-[magenta] tracking-[4.8px] w-[83.927px]">ARENA</span>
</span>
</nuxt-link>
</template>

This component is used in another template like this:

<Logo/>

I get the following error:

Component AtomLogo seems to have different HTML pre and post-hydration. Please make sure you don't have any hydration issues.

I also tried wrapping it like this:

<client-only>
  <Logo/>
  <HeaderNav/>
</client-only>

This didn't help. I have the same problem in other components as well.

How is it possible that static content causes this issue, and how can I avoid it?