Binding Java Collection field to Vaadin Fusion checkboxgroup

Question

There is a Java model:

public class User {

    private String username;
    @ElementCollection
    private List<String> roles;

}

There is a ts code:

private binder = new Binder<User, UserModel>(this, UserModel);
...

<vaadin-checkbox-group
            .label="${translate("users.roles")}"
            ...="${field(this.binder.model.roles)}"
            theme="vertical"
            >
            <vaadin-checkbox value="ROLE_ADMIN" label="ADMIN"></vaadin-checkbox>
            <vaadin-checkbox value="ROLE_USER" label="USER"></vaadin-checkbox>
</vaadin-checkbox-group>

When I click on then grid row (this.binder.read(item)) checkboxes are showed correct. But when I chenge the value by clicking any checkbox or deselect the row from the table I got an error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at HTMLElement._updateValue (vaadin-checkbox-group.js?84f6:314)
    at Object.runMethodEffect [as fn] (property-effects.js?c3e7:819)
    at runEffectsForProperty (property-effects.js?c3e7:157)
    at runEffects (property-effects.js?c3e7:121)
    at HTMLElement._propertiesChanged (property-effects.js?c3e7:1692)
    at HTMLElement._flushProperties (properties-changed.js?4bb0:354)
    at HTMLElement._flushProperties (property-effects.js?c3e7:1536)
    at HTMLElement._invalidateProperties (property-effects.js?c3e7:1506)
    at HTMLElement._setProperty (property-effects.js?c3e7:1491)
    at HTMLElement.Object.defineProperty.set (properties-changed.js?4bb0:153)

Answer 1

I deleted ..="${field(this.binder.model.roles)}" and put\get values via

@query('#rolesCBG')
private rolesCBG!: CheckboxGroupElement;

...
//setting value
this.binder.value.roles = this.rolesCBG.value;
...
//getting value from the grid
this.rolesCBG.value = item.roles as string[];

Now it works perfect.