RESOLVED - DevExpress controller in Vue3 Composition API - vue.js

Question

i'm developing in Vue3 with DevExpress controllers. On DevExpress website all the Vue demos show the Options API mode but i'm using the Composition API, and initially i have some problems about the customization form on runtime because append/remove items worked just in Options API.
I've undestand my error depends on reactivity.
On demos DevExtreme components use SimpleItems generated by itemOptions that is an array of objects related the options (parameters) of SimpleItem component.
[{
name: 'trash',
location: 'after',
options: {
type: 'danger',
stylingMode: 'text',
icon: 'trash',
onClick: () => {
employee.Phone.splice(index, 1);
itemOptions = this.getPhonesOptions(this.payload.Phone);
},
},
}]
Initially in Composition API i was instanceted just the values to show on each SimpleItem
const employee = reactive({
Phone: ['123']
})
but it was a mistake! I've understood that is necessary to make reactive itemOptions too!
Below the correct examples based on demo
<script setup>
import { reactive } from 'vue'
import {
DxForm,
DxSimpleItem,
DxGroupItem,
DxButtonItem,
DxLabel,
} from 'devextreme-vue/form';
const employee = reactive({
Phone: ['123'],
phoneOptions: []
})
employee.itemOptions = reactive([])
var phoneOptions = getPhoneItems(employee.Phone)
var addPhoneButton = {
icon: 'plus',
type: 'green',
stylingMode: 'contained',
onClick: () => {
employee.Phone.push('');
phoneOptions = getPhoneItems(employee.Phone);
},
}
function getPhoneItems(items) {
const options = [];
for (let i = 0; i < items.length; i += 1) {
options.push(newPhoneOptions(i));
}
return options;
}
function newPhoneOptions(index) {
return {
buttons: [{
name: 'trash',
location: 'after',
options: {
type: 'danger',
stylingMode: 'text',
icon: 'trash',
onClick: () => {
employee.Phone.splice(index, 1);
phoneOptions = getPhoneItems(employee.Phone);
},
},
}],
};
}
</script>
<template>
<DxForm
id="form"
:form-data="employee"
>
<DxGroupItem
name="items-container"
>
<DxGroupItem
item-type="group"
name="phones"
>
<DxSimpleItem
v-for="(p, index) in phoneOptions"
:key="'Phone' + (index + 1)"
:data-field="'Phone[' + index + ']'"
:editor-options="p"
>
<DxLabel :text="'ITEM ' + (index + 1)"/>
</DxSimpleItem>
</DxGroupItem>
<DxButtonItem
:button-options="addPhoneButton"
css-class="add-phone-button"
horizontal-alignment="left"
/>
</DxGroupItem>
</DxForm>
</template>
Regards
Davide