Nuxt 3 hydration children mismatch

Question

I get a simple list of categories from the server using async await, everything works fine. Next, I need to output a simple list of v-for, then I get this warning. I can remove all the contents of the ul tag and the error still remains, removing the v-for the error disappears. The tags are native, I make a request to the server using useFetch . The data is coming, I see them, everything about is displayed correctly.

What can I do?

<template>
<ul class="filter-item-list">
                <li v-for="item in categories" :key="item.id" >
                    <label class="radio" @click.stop="typeProduct=item.attributes.Title" >
                        <input type="radio" name="typeProduct" :checked="item.attributes.DefaultCategory">
                        <span class="icon"></span>
                        <span class="text">{{ item.attributes.Title }}</span>
                    </label>
                </li>
            </ul>
</template>

<script setup lang="ts">
const {categories, getCategories} = useCatalog()

await getCategories()
</script>

//pinia side

 actions: {
        async getCategories() {
            interface responseType {
                data: categoryType[],
                meta: []
            }

            useMain().$state.isLoading = true;
            const {data, error} = await useFetch(`${useRuntimeConfig().public.strapi.url}/api/categories`,
                {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    },
                })
            if (error.value) {
              
            } else {

              this.categories = (data.value as responseType).data
            }
            useMain().$state.isLoading = false;
        }}