How to properly add components to vue3?

Question

Vue.js

I have a component "blockTest.vue" where the "+" button is located, when clicking on it, the answer component should be added. I did but it works.

blockTest.vue

<template>
    <div class="block__test">
        <div class="test__true">
            <div class="true__inner">
                <span>Првильный ответ</span>
                <button @click="addAnswer">+</button>
            </div>

            <answer
                v-for="answer in answers"
                :answer="answer"
                :key="answer.id"
            />
        </div>
        <div class="test__false">
            <div class="false__inner">
                <span>Не првильный ответ</span>
                <button>+</button>
            </div>
            <answer/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'blockTest',
    
    props: {
        answers: {
            type: Array,
            required: true,
        }
    },
    data(){
        return {
            answers: [
             
           ]
        }
    },
    methods: {
        addAnswer(answer){
            this.answer.id = Date.now();
            this.answers.push(answer);
        }
    }
}
</script>

answer.vue

<template>
    <form class="text__inner">
        <input
            v-model="text"
            v-if="isElVisible"
            @change="showTextarea"
            class="input"
        />


        <p
            @click="showTextarea"
            v-else
        >
            {{header}}
            {{text}}

        </p>
    </form>
</template>

<script>
export default {
    name: 'answer',
    data(){
        return {
            text:'',
            header: 'Введите ответ',
            isElVisible: false,
        }
    },
    methods:{
        showTextarea(){
            this.isElVisible = !this.isElVisible;
            this.header = '';
        }
    }
}
</script>

Just not long ago I began to master the view, do not scold me much please if it's complete nonsense ..

Answer 1

1) Components must be named with at least two words.
2)

addAnswer(answer){
            this.answer.id = Date.now();
            this.answers.push(answer);
        }

this.answers you can’t modify props props, you need to send data to the gun so that the parent processes it and returns a new value to props.
3) this.answer.idwhere did you get this answer property from, it is not in the code.
4)

props: {
        answers: {
            type: Array,
            required: true,
        }
    },
    data(){
        return {
            answers: [
             
           ]
        }
    },

prop and property in data cannot have the same name
5)

<answer
                v-for="answer in answers"
                :answer="answer"
                :key="answer.id"
            />

Where did the answer prop come from if it is not in the component.
All these errors should have been reported to you in the vue log.