Vue компонент в Laravel - привязка данных не реагирует

Question

Мой первый компонент Vue.js в laravel сводит меня с ума.Мне нужно сделать связь между компонентом и массивом в JavaScript.Поскольку в массив добавлены элементы, мне нужно сделать его отзывчивым, но все статьи, связанные с этой темой, мне совсем не помогают.Кажется, я просто не попал в свою целевую переменную.

Мой app.js (он содержит некоторые тестовые данные для проверки того, что мой компонент работает в принципе и работает):

Vue.component('veg-bed-table', require('./components/VegBedTable.vue'));

var vegbed = new Vue({
    el: '#vegbed',
    data: function () {
        return {
            bedcomposition: [{id:2222, picref:234, plant:{name:1234}},{id:2223, picref:234, plant:{name:1234}}]
        }
    }
});

My VegBedTable.vue:

<template>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Image</th>
                <th scope="col">Name</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="plant in plants">
                <th scope="row">{{ plant.id }}</th>
                <td><img height="18px" :src="plant.picref"></td>
                <td>{{ plant.plant.name }}</td>
            </tr>               
        </tbody>    
    </table>
</template>

<script>
    export default {
        props:[
                'plants'
            ],
            
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Вызов компонента в блейде выглядит следующим образом:

            <div id="vegbed">
                <veg-bed-table v-bind:plants="bedcomposition"></veg-bed-table>
            </div>

После загрузки страницы все выглядит нормально, компонент показывает две строки в исходных данных.Но когда я пытаюсь присвоить реальные данные, вызывая функцию js, я получаю предупреждение:

[Vue warn]: невозможно установить реактивное свойство для неопределенного, нулевого или примитивного значения: undefined

с последующей ошибкой: TypeError: правая часть 'in' должна быть объектом, получившим неопределенное значение [Weitere Informationen]

в строке Vue.set ....

function addPlant(pref, plantsgroup, plant) {
    data.push({id:uuidv4(), x:50,y:50 ,picref:pref+'.svg',picsize:40, plant:plant, plantsgroup:plantsgroup});

    Vue.set(vegbed.bedcomposition, data);

    
    updateBedContent();
}

Когда я пытаюсь

Vue.set(vegbed, "bedcomposition", data);

Вместо этого я совсем не реагирую.

Так что у меня сложилось впечатление, что у меня проблема с контекстом / пространством имен, но после 3 часов чтения и проб и ошибок ядействительно разочарован.Любая помощь будет оценена.