Vue.js, updateData() kills ReportObject

Greetings.

We work with Vue 3 composition api.
In this code we have:

• props.data ( data for pivot that we get from server )
• watch(props.data) ( watch props.data, if it change, start code inside )

• pivotConfig our saved reportObject configuration in localStorage ( in this case only report.slice)

Our problem starts in watch(props.data).

1. We start component. Selector is empty. Pivot is empty ( all is well )
2. Change value in selector, we get data from server, watch(props.data) start else if (!report), we setReport(), pivot filled in with data and our report.slice
3. Change value in selector ( where DATA comes empty ), we get empty data from server, watch(props.data) start if (report), code start .updateData. ( as described in the documentation .updateData(Helps to update data for the report without cleaning the report.) ). pivot filled in with empty data. ( And if we check slice settings, they become empty ( why ?) )
4. Change value in selector, we get data from server, watch(props.data) start if (report), code start .updateData. And we see data with auto report.slice.

We have this problem only if get empty data from server.

if we always load ( not empty ) data, all work's fine. And don't delete our .slice

Is it bug ? Or wo don't understand something ?

Extra question. How to set globalObject ? Fox example globalObject.localization ?
Do we have something like gerReport() and setReport() for globalObject ?

Thank you for your reply.

<template> <Pivot ref="pivot" toolbar v-bind:licenseKey="'key'" /> </template> <script setup> import Pivot from "vue-flexmonster/vue3"; import "flexmonster/flexmonster.css"; import { ref, watch, defineProps, onMounted } from "vue"; let pivot = ref(); let pivotConfig = JSON.parse(localStorage.getItem("pivot-report-config")) || {}; // Define props const props = defineProps({ data: { type: Array, required: true, }, }); onMounted(() => { pivot.value.flexmonster.setReport({ localization: "/locale/flexmonster_lt.json", }); }); watch( () => props.data, (newData) => { const report = pivot.value.flexmonster.getReport(); if (report) { console.log("start1"); pivot.value.flexmonster.updateData({ data: newData }); } else if (!report) { console.log("start2"); pivot.value.flexmonster.setReport({ dataSource: { data: newData, }, slice: pivotConfig.slice, }); } }, { deep: true } ); </script>