firstItemPosition computed property is not recomputed when sortedItems changes

addon/src/modifiers/sortable-group.ts

@@ -1,7 +1,7 @@
 /* eslint-disable ember/no-computed-properties-in-native-classes */
 /* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
 import Modifier from 'ember-modifier';
-import { action, computed, set } from '@ember/object';
+import { action, set } from '@ember/object';
 import {
   isDownArrowKey,
   isEnterKey,
@@ -625,7 +625,6 @@ export default class SortableGroupModifier<T> extends Modifier<SortableGroupModi
    @property firstItemPosition
    @type Number
    */
-  @computed('direction', 'sortedItems')
   get firstItemPosition(): Position {
     const sortedItems = this.sortedItems;
 

test-app/app/controllers/index.js

@@ -15,6 +15,8 @@ export default class ModifierController extends Controller {
     { fruit: 'lemon', day: 'Sunday' },
   ];
 
+  @tracked mutableRecords = ['Zero', 'One', 'Two', 'Three', 'Four'];
+
   @action handleDragChange(reordered) {
     this.records = reordered;
   }
@@ -76,4 +78,24 @@ export default class ModifierController extends Controller {
     set(this, 'model.itemsGrid2', newOrder);
     set(this, 'model.dragged', draggedModel);
   }
+
+  @action
+  updateMutable(newOrder, draggedMode) {
+    this.mutableRecords = newOrder;
+  }
+
+  @action
+  removeItemHorizontal(item) {
+    this.mutableRecords = this.mutableRecords.filter(
+      (record) => record !== item,
+    );
+  }
+
+  @action
+  addItemToHorizontal() {
+    this.mutableRecords = [
+      ...this.mutableRecords,
+      `Item ${this.mutableRecords.length + 1}`,
+    ];
+  }
 }

test-app/app/styles/app.css

@@ -295,3 +295,39 @@
 .word-break {
   word-wrap: break-word;
 }
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.mr-5 {
+  margin-right: 5px;
+}