ExtJS ViewModel setData() only works when data is different - extjs

Question

I have 2 combos: The second one is on a form and depends on the first one. To do this, the value of the second one is binded to a ViewModel data property. I made a button to reset the form and reassign the value of the second combo with the value of the first one (It might be change).
The problem is when I do the following: I change the value of the first combo. When I click the button the first time, it works (the second combo is changed). But when I click the second time (with both combos with the same value), the second combo is emptied. It doesn't seem to work if the value of the second combo is the same as that of the first combo. What I am doing wrong?
Here is my code in a fiddle

Answer 1

When the value of the first combo corresponds to the value of the second combo, the viewmodel does not change, which is logical. We don’t need extra operations. Accordingly, the value is not substituted in the second combobox and it only makes a reset.
To force a model update, you must inform her about this using the notify method
You can see that behavior on my fiddle
Look at callstack when values are matches and don't mathes.

Answer 2

Try it, I hope it'll help.
Use Component Query Selector to direct set the value in combo box.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
var viewmodel = Ext.create('Ext.app.ViewModel', {
data: {
state: 'AL'
}
});
var refCombo = Ext.create('Ext.form.field.ComboBox', {
store: states,
queryMode: 'local',
itemId: 'refCombo',
displayField: 'name',
valueField: 'abbr',
editable: false,
value: 'AL',
renderTo: Ext.getBody()
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
viewModel: viewmodel,
items: [{
xtype: 'combo',
store: states,
queryMode: 'local',
itemId: 'refCombo2',
displayField: 'name',
valueField: 'abbr',
editable: false,
bind: {
value: '{state}'
}
}, {
xtype: 'button',
text: 'CLICK',
handler: function(button) {
button.up('form').getForm().reset();
viewmodel.setData({'state': refCombo.getValue()})
let refCombo2 = Ext.ComponentQuery.query('#refCombo2')[0];
refCombo2.setValue( refCombo.getValue());
}
}]
});