Как отправить модальные данные родителю в Bootstrap Vue?

Vue.component('modal', {
    props:['commodity_data'],
    template:/*html*/`
        <div>            
            <b-modal id = "addModal" ref = "modal" hide-footer title = "Add Commodity">
                <b-form-group>
                    <label>
                    Hu Count
                        <b-form-input
                            id = "hu_count"
                            v-model = "new_row.hu_count"
                            >
                        </b-form-input>
                    </label>
                    <label>
                    Dimensions
                        <b-form-input
                            id = "dimensions"
                            v-model = "new_row.dimensions"
                            >
                        </b-form-input>
                    </label>
                    <label>
                    Weight
                        <b-form-input
                            id = "weight"
                            v-model = "new_row.weight"
                            >
                        </b-form-input>
                    </label>
                </b-form-group>

            <b-button variant = "success" @click = "addRow">Add Row</b-button> 
        </b-modal>

        </div>
    `,
    data(){
        return{
            new_row:
            {
                dimensions: '',
                hu_count: '',
                weight: '',
            }
        }
    },
    methods:{
        addRow: function () {            
            this.commodity_data.push(this.new_row)
            this.$refs.modal.hide()
            console.info(this.commodity_data);
        }
    }
})

Vue.component('commodity', {
    template: /*html*/`
    <div class = "mx-auto commodity card">
            <div class = "commodity__div-buttons">
                <div class = "commodity__buttons">
                    <b-button variant = "success" v-b-modal.addModal>Add Row</b-button> 
                    <b-button variant = "danger" @click = "deleteRows">Delete</b-button> 
                </div>
            </div>

        <b-table striped hover responsive :fields = "fields" :items = "commodity_data">

            <template #head(index) = "data">
                <input type = "checkbox" @click = "selectAll" ref = "checkAll">
            </template>

            <template #cell(index) = "data">        
                <input type = "checkbox" @click = "selectRows(data.index)">
            </template> 

        </b-table>

        <modal id = "addModal" :commodity_data = "commodity_data"></modal>
        
    </div>
    `,
    data() {
        return {
            commodity_data: [],
            checkboxes: '',
            fields: [
                {
                    key: 'index'
                },
                {
                    key: 'hu_count',
                    label: 'Hu Count'
                },
                {
                    key: 'dimensions',
                    label: 'Dimensions'
                },
                {
                    key: 'weight',
                    label: 'Weight'
                }
            ]
        }
    },
    methods: {
        selectRows: function (e) {
            this.commodity_data[e].checked = !this.commodity_data[e].checked
        },
        deleteRows: function () {
            for (let i = 0; i < this.commodity_data.length; i++) {
                if (this.commodity_data[i].checked) {
                    this.commodity_data.splice(i, 1)
                    i--
                }
            }
            this.checkboxes.forEach(element => {
                element.checked = false
            });
        },
        selectAll: function () {
            this.commodity_data.forEach(element => {
                element.checked = !element.checked
            });

            if (this.$refs.checkAll.checked) {
                this.checkboxes.forEach(element => {
                    element.checked = true
                });
            } else {
                this.checkboxes.forEach(element => {
                    element.checked = false
                });
            }
        }
    },
    created: function () {
        let data = JSON.parse(sessionStorage.getItem('data_info'))
        this.commodity_data = data.commodity
        
    },
    mounted(){
        const table = document.querySelector('table')
        this.checkboxes = table.querySelectorAll('input')
    }
})