How to create new divs on button click using vue.js?

Question

Vue.js

I have several buttons, when clicking on each, a div with a different house architecture is created that is stored in one component:
click on 1 button - div with one house architecture
click on 2 - div button with a different architecture
click on 3 - div with the third
and so on .
I just started learning vue, so I don’t really know how to do it right. How can I implement my task so that when a button is clicked, new divs are created in another

addblock.vue component (where the buttons are)

<template>
    <div class="addblock">
        <btnAddblock1 class="btn-addblock"
            @click="addblock1"
        />
        <btnAddblock2 class="btn-addblock"/>
        <btnAddblock3 class="btn-addblock"/>
        <btnAddblock4 class="btn-addblock"/>
        <btnAddblock5 class="btn-addblock"/>
        <btnAddblock6 class="btn-addblock"/>
    </div>
</template>

<script>
export default {
    data(){
        return{
            blocks:[
                
            ]
        }
    },
    methods:{
        addblock1(){
            const newBlock1 = {
                id: Date.now(),
            }
            this.posts.push(newBlock1)
        }
    }
    
}
</script>

block.vue (component (where new divs appear on click) )

<template>
    <div>
        <h1>Новый блок</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

Answer 1

I may not understand but.
create a component for each button using v-show or v-if show this component on click.
Another option is a list.
Clicking on the button adds an element to the end. In the list renderer, depending on the elType, you render the desired component
{id: 56,: elType: 'box', ....}