Как задать id при создании компонента во vue.js?

Есть компоненты кнопки(btn-addblock-1-6), при нажатии на них создаются другие компоненты(BlockItem1,BlockItem2,BlockItem3,BlockItem4,BlockItem5,). Хочу сделать так что бы при их создании им задавался айдишник. Как это можно сделать? Пытался что то сделать с первым компонентом, что бы ему приписывался айдишник, но без успешно

<template>

    <component v-for="n in blocks" :is="n"></component>
    
    <div class="mainBtn">
        <btn-addblock-1 
            v-for="n in blockTypes"  
            :key="n.id"
            @click="blocks.push(n), addBlock(n)" 
            @remove="removeBlock1"
            class="btnAddblock"
        />
        <btn-addblock-2 v-for="n in blockTypes2" @click="blocks.push(n)" class="btnAddblock"/>
        <btn-addblock-3 v-for="n in blockTypes3" @click="blocks.push(n)" class="btnAddblock"/>
        <btn-addblock-4 v-for="n in blockTypes4" @click="blocks.push(n)" class="btnAddblock"/>
        <btn-addblock-5 v-for="n in blockTypes5" @click="blocks.push(n)" class="btnAddblock"/>
        <btn-addblock-6 v-for="n in blockTypes6" @click="blocks.push(n)" class="btnAddblock"/>
    </div>
</template>

<script>
import MainBlock from './components/mainBlock.vue'

export default{
    components:{
        MainBlock,
    },
    data: () => ({       
        blocks: [],
        blockTypes: ['block-item1',],
        blockTypes2: ['block-item2',],
        blockTypes3: ['block-item3',],
        blockTypes4: ['block-item4',],
        blockTypes5: ['block-item5',],
        blockTypes6: ['block-item6',],
    }),
    methods: {
        addBlock(n){
            const addBlock1 = {
                id: Date.now()
            }
            this.blocks.push(addBlock1);
            console.log(addBlock1.id);
        },
        removeBlock1(n) {
            this.blocks = this.blocks.filter(p => p.id !== this.blocks.id)
            console.log(n)
        },
    }

}
</script>