Передача данных от родительского к дочернему модальному - Vue.js

Я пытаюсь передать некоторые данные из родительского компонента в дочерний компонент, который является модальным. По какой-то причине мне выдано сообщение об ошибке «Uncaught TypeError: Cannot set property 'domain' of undefined». Я пытаюсь пройти через элемент родительского компонента с его ключом, а затем найти этот элемент в родительском компоненте, а затем перейти к переменной данных в дочернем компоненте. Может кто-нибудь подскажет, что мне не хватает? Спасибо!

Это мой родительский компонент Domain.vue

<template>
    <div class = "container">
        <div class = "form-group">
                <input type = "text" class = "form-control" id = "filter" placeholder = "Filter the Domains">  
        </div>

        <div class = "row content-holder">
            <table>
                <thead>
                    <tr>
                        <th class = "client-name">Domain</th>
                        <th class = "client-pm">Client</th>
                        <th class = "client-pm">Add Log on Domain</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for = "domain in domains" :key = "domain.id" :domain = "domain" class = "tr-table">
                        <td class = "client-name">{{ domain.url }}</td>
                        <td class = "client-pm">{{ domain.client }}</td>
                        <td class = "client-pm center"><i class = "fas fa-plus jobs-page" data-toggle = "modal" @click = "openAdd(domain)"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Add :openmodal = "addActive" @closeRequest='close'></Add>

    </div>
</template>

<script>

import axios from 'axios';
let Add = require('./Add.vue');

    export default {

        name:'Domain',

        data(){
            return {

                addActive:'',
                domains: [],
                domain: {id:'', url:'', client: ''},
                errors:{}
            }
        },

        methods:{

            getDomains(){
                window.axios.get('/develogger-app/public/api/domains').then(({data})=>{
                    data.forEach(domain =>{
                        this.domains.push(domain)
                    });
                });
            },

            openAdd(key){
                this.$children[1].domain = this.domains[key];
                this.addActive = 'is-active';

            },

            save(){

            },

            close(){
                this.addActive = '';
            },

        },

        created(){
            this.getDomains();
        },



        components:{
            Add
        }



    }



</script>

Это дочерний компонент Add.vue

<template>
        <!-- Modal -->
            <div :class = "openmodal" class = "modal fade" id = "exampleModalCenter" tabindex = "-1" >
                <div class = "modal-dialog modal-dialog-centered" role = "document">
                    <div class = "modal-content">
                    <div class = "modal-header">
                        <h5 class = "modal-title" id = "exampleModalLongTitle">Create new Log</h5>
                        <button type = "button" class = "close">
                            <i class = "fas fa-times" @click = "close"></i>
                        </button>

                    </div>
                    <div class = "modal-body">
                        <form method = "post">
                            <input type = "hidden" name = "_token" :value = "csrf">

                            <input name = "website" type = "text" id = "website" class = "form-control" placeholder = "Log Title"><br>

                            <select id = "type" class = "form-control" name = "type"><br>
                                <option></option>
                            </select>

                            <br>

                            <select id = "type" class = "form-control" name = "type"><br>
                                <option value = "" disabled selected>Type</option>
                                <option>Client Update</option>
                                <option>Dev Update</option>
                                <option>Bug</option>
                                <option>Style Fix</option>
                            </select>

                            <br>

                            <label class = "left" for = "description">Log Description:</label>
                                <textarea class = "form-control" rows = "5" id = "description" name = "description"></textarea>
                            <br>

                            <div class = "left">
                                <input  type = "checkbox" name = "tell-everyone" id = "tell-everyone">
                                <label for = "description">Tell Everyone?</label>
                                <br>
                                <input type = "checkbox" name = "status" id = "status" value = "checked">
                                <label for = "checked">Resolved and Tested?</label>
                            </div>
                        </form>   
                    </div>
                    <div class = "modal-footer">
                        <button  id = "log-it" type = "button" class = "btn btn-circle btn-xl" data-dismiss = "modal">
                            <span  id = "button-content"><b>LOG IT</b></span>
                            <span  id = "button-content"><b>FIX IT</b></span>
                        </button>
                    </div>
                    </div>
                </div>
            </div>
</template>

<script>
export default {
    // checked:false,
    name:'Add',
    props:['openmodal'],

    data(){
            return{
                domain:'',
                csrf: document.querySelector('meta[name = "csrf-token"]').getAttribute('content'),
            }
    },

     methods:{
        close(){
            this.$emit('closeRequest');
        }
    },

    // computed: {
    //         isComplete () {
    //             return this.log.title && this.log.domain_id && this.log.type && this.log.description;
    //         }
    //     },
}
</script>