Vue Lightgallery gives 'items are undefined' error

Question

I use Vue Lightgallery in Symfony with Vue 3 and Vue loader, the lightgallery is not loaded correctly and the control bar appears only sometimes and gives me then an items are undefined error.

I load the images via twig template and an json string.

Perhaps somebody can tell me what I am doing wrong?

Here is my code:

gallery.js

import { createApp } from 'vue'
import gallery from './components/gallery'
import lightgallery from 'lightgallery/vue/LightGalleryVue.umd.js';


const app = createApp(gallery)
app.component('lightgallery',lightgallery)

app.mount("#gallery");

This is my gallery.vue component where the images json string is loaded and then via for loop is created.

<script>
import  'lightgallery/scss/lightgallery.scss';
import lgZoom from 'lightgallery/plugins/zoom';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
export default {
    name: 'gallery',
    data() {
        return {
           images: '',
           plugins: [lgZoom, lgThumbnail],
        }
    },
    mounted() {
        this.images = document.getElementById('gallery').getAttribute('data-images')
        this.images = JSON.parse(this.images)
    },
    methods: {
    }
    }
</script>
<template>
    <lightgallery
        :settings="{ speed: 500, plugins: plugins }"
    >
    <a class="gallery-item" v-for="image in images" :href='`/gallery/${image.name}`'>
        <img class="img-responsive" :src="`/gallery/${image.thumpName}`" />
    </a>
</lightgallery>
</template>