Как я могу отобразить шаблон списка вложенных компонентов Vue?

Question

Я исследовал сайт и Google, но не могу найти ответ.

Я хочу отобразить шаблон списка компонентов, который есть у одного компонента.

Неполадка находится внутри шаблона родительского компонента здесь:

    <Attribute
            v-for="attribute in attributes"
            v-bind:key="attribute.name"
            :name="attribute.name"
            :value="attribute.value"
            :defaultValue="attribute.defaultValue"
            :bonusAtDefault="attribute.bonusAtDefault"
            :valueToBonusIncrementRatio="attribute.valueToBonusIncrementRatio"
    >
    </Attribute>

До этого я рендерил обозначения объектов всех элементов атрибута, и он отлично работает:

    <div v-for="(attribute, index) in attributes" :key="`attribute-${index}`">
        {{attribute}}
    </div>

Появляющиеся ошибки указывают на то, что при попытке создания экземпляров компонентов атрибута значение для всех элементов в атрибуте не определено.

Мой общий код для компонента ниже:

    <template>
    <div v-if="attributes.length == 0" id="attributesContainer">
        <p>No attributes are here!</p>
        <button id="attributesModalOpenBtn">Add Attribute</button>
        <div id="attributesModal" class="modal">
            <div id="attributesModalContent" class="modal-content">
                <span id="attributeModalClose" class="modal-close">&times;</span>
                <label>Name:</label>
                <input type="text" id="newAttributeName" v-model="modalName"/>
                <label>Value:</label>
                <input type="text" id="newAttributeValue" v-model="modalValue"/>
                <label>Default Value:</label>
                <input type="text" id="newAttributeDefaultValue" v-model="modalDefaultValue"/>
                <label>Bonus At Default:</label>
                <input type="text" id="newAttributeBonusAtDefault" v-model="modalBonusAtDefault"/>
                <label>Value-to-bonus Increment Ratio:</label>
                <input type="text" id="newAttributeRatio" v-model="modalRatio"/>
                <button v-on:click="addAttribute()">
                    Create Attribute
                </button>
            </div>             
        </div>
    </div>
    <div v-else id="attributesContainer">
        <button id="attributesModalOpenBtn">Add Attribute</button>
        <div id="attributesModal" class="modal">
            <div id="attributesModalContent" class="modal-content">
                <span id="attributeModalClose" class="modal-close">&times;</span>
                <label>Name:</label>
                <input type="text" id="newAttributeName" v-model="modalName"/>
                <label>Value:</label>
                <input type="number" id="newAttributeValue" v-model="modalValue"/>
                <label>Default Value:</label>
                <input type="number" id="newAttributeDefaultValue" v-model="modalDefaultValue"/>
                <label>Bonus At Default:</label>
                <input type="number" id="newAttributeBonusAtDefault" v-model="modalBonusAtDefault"/>
                <label>Value-to-bonus Increment Ratio:</label>
                <input type="number" id="newAttributeRatio" v-model="modalRatio"/>
                <button v-on:click="addAttribute()" class="modal-close">
                    Create Attribute
                </button>
            </div>             
        </div>
        <div v-for="(attribute, index) in attributes" :key="`attribute-${index}`">
            {{attribute}}
        </div>
        <Attribute
            v-for="attribute in attributes"
            v-bind:key="attribute.name"
            :name="attribute.name"
            :value="attribute.value"
            :defaultValue="attribute.defaultValue"
            :bonusAtDefault="attribute.bonusAtDefault"
            :valueToBonusIncrementRatio="attribute.valueToBonusIncrementRatio"
        >
        </Attribute>
    </div>    
</template>

<script>
    import Attribute from './Attribute.vue'

    export default {
        data() {
            return {
                modalName:'',
                modalValue:10,
                modalDefaultValue:10,
                modalBonusAtDefault:0,
                modalRatio:2,
                attributes: [],
            }
        },
        components: {
            Attribute
        },
        methods: {
            addAttribute () {
                this.attributes.push(
                    {'Attribute':{
                        'name': this.modalName,
                        'value': this.modalValue,
                        'defaultValue': this.modalDefaultValue,
                        'bonusAtDefault': this.modalBonusAtDefault,
                        'valueToBonusIncrementRatio': this.modalRatio
                    }}
                )
            },
        }
    };
</script>

<style scoped>
@import 'modal.css';
</style>

Кроме того, модал и все, вплоть до создания экземпляров и рендеринга атрибутов, работает нормально, просто поместите туда весь файл для контекста.