Updating items and groupName results in error

[svdsande]

Describe the bug Trying to move or drag any item after updating both items and groupName results in an error. Uncaught TypeError: this.sortableGroup is undefined

To Reproduce

<ol {{sortable-group groupName=this.groupName onChange=this.reorderItems}}>
  {{#each this.items as |item|}}
    <li {{sortable-item groupName=this.groupName model=item}}>
      {{item}}
      <span class='handle' {{sortable-handle}}>&varr;</span>
    </li>
  {{/each}}
</ol>

<p>The last dragged item was: {{this.lastDragged}}</p>

<button {{on "click" this.updateDataSource}} type="button">Change data source</button>

export default class FooComponent extends Component {
    @tracked lastDragged;
    @tracked items = ['A', 'B', 'C'];
    @tracked groupName = 'foo_01';

  @action
  reorderItems(itemModels, draggedModel) {
    this.items = itemModels;
    this.lastDragged = draggedModel;
  }

  @action
  updateDataSource() {
    this.groupName = 'foo_02';
    this.items = ['D', 'E', 'F'];
  }
}

1. Render component
2. See default rendered items (A, B, C)
3. Click "Change data source" button
4. See items are changed (D, E, F)
5. Try to move any given item
6. See error

Expected behavior Should be able to move items after they are updated.

[Ekluv]

try {{#each this.items key="@index" as |item|}}. it works for me

[mike183]

Hey @svdsande, did you ever find a solution/workaround for this?