Hydratation text mismatch on

<script setup lang="ts">

import type { BlockFeatPremiumOffers } from './feat-premium-offers-types';
defineProps<{
    data: BlockFeatPremiumOffers;
}>();


const baseURL = useRuntimeConfig().public.directusUrl
const { data: offers} = await useFetch(`${baseURL}/api/offers`,{
    query:{
        isPremium: true,
        perPage: 9
    }
})
</script>
<script lang="ts">
    import '@splidejs/vue-splide/css';
    import { Splide, SplideSlide } from '@splidejs/vue-splide';
    export default defineComponent( {
    components: {
        Splide,
        SplideSlide,
    },
    } );
</script>

<template>
    <BlockContainer class="block-feat-premium-offers my-10 bg-secondary-100 lg:my-20">
          <div v-for="(offer, index) in offers.data">
          <PartsOfferCard :offer="offer" variant="premium"></PartsOfferCard>
      </div>
    </BlockContainer>
</template>

<script setup type="ts">
import { DateTime } from 'luxon';

const props = defineProps({
    offer: {
        type: undefined,
        required: true,
    },
    variant: {
        default: '',
        validator: (value) => ['', 'premium'].includes(value),
    },
})
const offer = computed(() => props.offer)
const variant = computed(() => props.variant)
const dateStart = computed(() => DateTime.fromISO(props.offer.date_start).toRelative())
</script>
<template>
    
    <div class="aspect-square bg-white shadow-offer-card">
        <p class="flex items-center gap-2 text-sm italic text-secondary">
          {{dateStart}}
        </p>
    </div>
</template>