Vue component in laravel - databinding not responsive

My first Vue.js component in laravel drives me crazy. I need to make a binding between a component and an array in javascript. As there are elements added in the array I need to make it responsive but all articles related to this topic do not help me at all. It seems that I just do not hit my target variable.

My app.js (it contains some test data to verify that my component ist working in priciple and it does):

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"></th>
                <td><img height="18px" :src="plant.picref"></td>
                <td></td>
            </tr>               
        </tbody>    
    </table>
</template>

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

The call of the component in the blade looks like this:

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

After loading the page everything looks fine, the component shows the two lines in the inital data. But when I try to assign the real data by calling a js function I get a warning:

[Vue warn]: Cannot set reactive property on undefined, null, or primitive value: undefined

followed by an error: TypeError: right-hand side of 'in' should be an object, got undefined[Weitere Informationen]

both in the line of the 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, plant);

    
    updateBedContent();
}

So I have the impression I have a context/namespace issue but after 3hours reading and trial&error I'm really frustrated. Any help would be appreciated.

via Chebli Mohamed