ExtJs classic - deep bind to an array value is not re-evaluated when the array is added items

I created this fiddle where you can see what happens: https://fiddle.sencha.com/#view/editor&fiddle/3ndt

Ext.application({ name: 'Fiddle', launch: function () { Ext.define('MyViewModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.myviewmodel', data: { items: ['Item 1', 'Item 2', 'Item 3'] }, stores: { store: { fields: ['item'], data: [] } }, formulas: { itemCount: { bind: { bindTo: '{items}', deep: true }, get: function (data) { //console.log(data); return data.length; } }, } }); Ext.create('Ext.panel.Panel', { viewModel: { type: 'myviewmodel' }, items: [{ xtype: 'displayfield', fieldLabel: 'Item Count', bind: '{itemCount}' //bind: '{store.count}' }, { xtype: 'button', text: 'Add item', style: 'margin-right: 10px;', handler: function () { //console.log('Button 1 clicked'); //debugger; let vm = this.up('panel').getViewModel(); let stack = vm.get('items'); //debugger; stack.push('Item 4'); console.log(stack); let store = vm.getStore('store'); store.add({ item: 'Item' }); console.log(store.data.items); } }], renderTo: Ext.getBody() }); } }); 

The formula itemCount is deep bound to the array and it returns the number of items in the array. When I click on the Add Item button, I add an item in the array, however the itemCount formula is not re-evaluated.

Any idea why this limitation? I find it surprising.

As workaround, if I use a store and bind to the store.count property, then it works. Comment out bind: '{itemCount}' and remove the comment from the line below, run the fiddle and click the Add Item button a few times.

Just a side note, I created this Vue playground and you can see that vue binds the array properly, i.e. if items are added to the array, then the length of the array is re-evaluated.

App.vue

<script setup> import { ref } from 'vue' const msg = ref('Hello World!') const array = ref(['item 1', 'item 2', 'item 3']) </script> <template> <h1>{{ msg }}</h1> <input v-model="msg"> <br/> <button @click="array.push('Item 4')"> Click me </button> <span> Array: {{array}}, length: {{array.length}}</span> </template>