Как динамически отправлять несколько задач в Label Studio или обновлять задачи (используя в Vue 3)

Question

Я использую Label Studio в своем проекте Vue 3. Настройка проекта выглядит следующим образом

КомпонентLabelStudioHelper.vue

      <template>
    <div id="label-studio"></div>
</template>


<script>
import LabelStudio from "@heartexlabs/label-studio";

export default {
    props: {
        config: {
            type: String,
            required: true
        },
        interfaces: {
            type: Array,
            required: false,
            default: () => [
                "panel",
                "update",
                "submit",
                "controls",
                "infobar",
                "topbar",
                "side-column",
                "annotations:history",
                "annotations:tabs",
                "annotations:menu",
                "annotations:current",
                "edit-history",
            ]
        },
        task: {
            type: Object,
            required: true
        },
        onLabelStudioLoad: {
            type: Function,
            required: false,
            default: (ls) => { }
        },
        onSubmitAnnotation: {
            type: Function,
            required: false,
            default: (ls, annotation) => { }
        },
        onUpdateAnnotation: {
            type: Function,
            required: false,
            default: (ls, annotation) => { }
        },
    },
    data() {
        return {
            labelStudio: null,
        };
    },
    mounted() {
        const labelStudio = new LabelStudio('label-studio', {
            config: this.config,
            interfaces: this.interfaces,
            task: this.task,
            user: {
                pk: 1,
                firstName: 'John',
                lastName: 'Doe',
            },

        });
        labelStudio.on("labelStudioLoad", (LS) => {
            // Perform an action when Label Studio is loaded
            const c = LS.annotationStore.addAnnotation({
                userGenerate: true
            });
            LS.annotationStore.selectAnnotation(c.id);
        });

        labelStudio.on("updateAnnotation", (LS, annotation) => {
            // Perform an action when an annotation is updated
            console.log(annotation.serializeAnnotation())
        });

        labelStudio.on("nextTask", (LS) => {
            // Perform an action when the next task button is clicked
            console.log("Next task button clicked")
        });

        labelStudio.on("submitAnnotation", (LS, annotation) => {
            // Retrieve an annotation in JSON format
            console.log(annotation.serializeAnnotation())
        });
        this.labelStudio = labelStudio;
    },
}
</script>


<style>
@import '@heartexlabs/label-studio/build/static/css/main.css';
</style>

Родитель

      <template>
    <div>
        <button @click="Next_Image">Next Image</button>
        <LabelStudioHelper :task="task" :config="config" :interfaces="interfaces" />
    </div>
</template>

<script>
import LabelStudioHelper from "@/components/LabelStudioHelper.vue";
import data from "@/components/data.json";

export default {
    components: { LabelStudioHelper },
    data() {
        return {
            task: {
                annotations: [],
                id: 1,
                data: {
                    image: 'https://picsum.photos/id/237/400/550'
                }
            },
            config: `
            <View>
                <Image name="img" value="$image"></Image>
                <RectangleLabels name="tag" toName="img">
                    <Label value="Picture"></Label>
                    <Label value="Table"></Label>
                </RectangleLabels>
            </View>`,
            interfaces: [
                "panel",
                "update",
                "controls",
                "side-column",
                "annotations:delete",
                "submit",
                "infobar",
                "topbar",
                "annotations:history",
                "annotations:tabs",
                "annotations:menu",
                "annotations:current",
                "edit-history"
            ],
        };
    },
    mounted() {
        console.log(this.data);
        console.log(this.task);

    },
    methods: {
        Next_Image() {
            this.task = data[1];
            console.log("Next Image");
        },
    },
}
</script>

Вышеуказанная настройка отлично работает для одного изображения, но я хочу инициализировать LabelStudio с несколькими изображениями или динамически обновлять изображения для аннотаций. Итак, я создал файл json со списком задач и попытался передать этот объект json в опору задачи в LabelStudio, но он выдал ошибку.

      [
    {
        "id": 1,
        "data": {
            "image": "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
        },
        "annotations": [],
        "predictions": []
    },
    {
        "id": 2,
        "data": {
            "image": "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/history-in-hd-e5eDHbmHprg-unsplash.jpg"
        },
        "annotations": [],
        "predictions": []
    },
    {
        "id": 3,
        "data": {
            "image": "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/soroush-karimi-crjPrExvShc-unsplash.jpg"
        },
        "annotations": [],
        "predictions": []
    }
]

Прохождениеdata.jsonв лейблстудию вannotation.vue

      import LabelStudioHelper from "@/components/LabelStudioHelper.vue";
import data from "@/components/data.json";

export default{
components: { LabelStudioHelper },
    data() {
        return {
            task: { data }
            },
            config: `
            <View>
                <Image name="img" value="$image"></Image>
                <RectangleLabels name="tag" toName="img">
                    <Label value="Picture"></Label>
                    <Label value="Table"></Label>
                </RectangleLabels>
            </View>`,
            interfaces: [
                "panel",
                "update",
                "controls",
                "side-column",
                "annotations:delete",
                "submit",
                "infobar",
                "topbar",
                "annotations:history",
                "annotations:tabs",
                "annotations:menu",
                "annotations:current",
                "edit-history"
            ],
        };
    },
      
};

Если кто-нибудь знает, как динамически обновлять изображения для аннотаций после инициализации LabelStudio или инициализации студии этикеток с несколькими изображениями, помогите мне. Спасибо :)