How to pass a data-attribute to child component in Vue.js

Question

I am using Vue 3 with nuxt.js to create a blog-site with Storyblok CMS. I am stuck at filtering the articles according to the category id's as I cannot pass down category id's of articles to child component. The below ArticleList.vue file is working and sending all attributes (except maybe id) to ArticleCard.vue (child component).

<template>
    <section v-editable="blok" class="m-3 s-1">
        <div class="cards limited medium-limited small-limited">
            <ArticleCard 
                v-for="article in articles" 
                :key="article.uuid" 
                :article="article.content"
                :slug="article.full_slug"
                :id="article.categories"/>
        </div>
    </section>
</template>

<script setup>
defineProps({ blok: Object })

const articles = ref(null)
const storyblokApi = useStoryblokApi()
const { data } = await storyblokApi.get('cdn/stories', {
    version: useRoute().query._storyblok ? 'draft' : 'published',
    starts_with: 'blog',
    is_startpage: false,
})
articles.value = data.stories
</script>

And the below code is from ArticleCard.vue. Everything except id is working perfectly. I was expecting to see the id attribute in localhost inspecting environment.

<template v-editable="article">
    <div class="card small-12 small-limited">
        <NuxtLink :to="'/' + slug" class="card-cat" :data-id="article.categories">
            <img :src="article.image.filename + '/m/400x0'" :alt="article.image.alt" class="card-img" />
            <div class="card-wrapper card-text" :id="article.categories">
                <h2 class="body-semibold body-m ms-4">
                    {{ article.title }}
                </h2>
                <p class="body-text body-m ms-1"> by {{ article.author }}</p>
            </div>
        </NuxtLink>
    </div>
</template>

<script setup>
defineProps({ article: Object, slug: String, id: String })
</script>

I tried different names such as data-id, cat-id, different locations( put the attribute on parent/child div) however the result was the same. The weird thing is when I first try to write it and save, it shows in attributes but when I refresh the localhost page (or deploy it) the id attribute is gone.

**What should I do to see "article.categories" attribute in the ArticleCard component? **

Additional Information: I believe it is related to passing the promps to child component as I am using a similar method to get the category tags' id, and it is working perfectly but there are no child component. I am leaving that Categories.vue file below for additional information.

<template>
    <div v-editable="blok" class="nav-item">
        <ul class="nav-cat">
            <li v-for="label in Categories"
             :key="label.uuid"
             :id="label.uuid"
             @click="handleCategoryClick" 
             class="cat-block">
                <h3 class="body-text body-m body-s-m">
                    {{ label.content.label }}
                </h3>
            </li>
        </ul>
    </div>
</template>

<script setup>

defineProps({ blok: Object})
const categories = ref(null)
const storyblokApi = useStoryblokApi()
const { data } = await storyblokApi.get('cdn/stories', {
    version: useRoute().query._storyblok ? 'draft' : 'published',
    starts_with: 'category',
    is_startpage: false,
})
categories.value = data.stories

</script>

Answer 1

After couple of days, I find both the solution and the actual problem with my method. If you have a similar problem and in your first render the data-attribute is not working but works afterwards, check if the attribute is an array.

In my case :data-id:article.categories was an array of strings and only changing it to :data-id:article.categories.join(',') was enough to get them render when opening the page (in both local and deployed versions).