Re-render on drop (without clear)

controllers.application\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action, get, set, setProperties, computed } from '@ember/object';
import { recordIdentifierFor } from '@ember-data/store';
import { dependentKeyCompat } from '@ember/object/compat';
import { TrackedArray } from 'tracked-built-ins';
import { run, scheduleOnce } from '@ember/runloop';

export default class ApplicationController extends Controller {
  @service store;
  
  appName = 'Ember Twiddle';

	constructor(){
    super(...arguments)
    
    const bRecord = this.store.createRecord('b', { title: 'bRecord', rowOrderPosition: '2' })
    const bRecord2 = this.store.createRecord('b', { title: 'bRecord2', rowOrderPosition: '1' })
    const bRecord3 = this.store.createRecord('b', { title: 'bRecord3', rowOrderPosition: '3' })
    
    this.aRecord = this.store.createRecord('a', {
      bRelation: new TrackedArray([bRecord, bRecord2, bRecord3])
    })
    
  }

	recordIdentifierFor = recordIdentifierFor;

	@computed('aRecord.bRelation.hasDirtyRelations')
  //@dependentKeyCompat
  get bRecords() {
    const rows = this.aRecord.bRelation.toArray()
    rows.sort((a, b) => {
      return a.rowOrderPosition > b.rowOrderPosition ? 1 : -1;
    });
    return rows;
  }

	@action
	bRecordDelete(bRecord) {
    bRecord.deleteRecord()
  }

	@action
	onDrop(el, target) {
 
    let draggedBRecord = get(this, 'bRecords').find((b) => {
      return (
        el.dataset.stageRecordIdentifier ===
        recordIdentifierFor(b).toString()
      );
    });
    
    Array.from(target.children).forEach((el, i) => {
      const bRecord = this.bRecords.find(
        (rowBRecord) =>
          recordIdentifierFor(rowBRecord).toString() ===
          el.dataset.stageRecordIdentifier
      );

      set(bRecord, 'rowOrderPosition', i+1);
    });
    
    /*
    const clone = this.aRecord.bRelation.toArray()
    clone.reverse()
    
    this.aRecord.bRelation.setObjects(clone)*/
    
    
    
    this.aRecord.bRelation.removeObject(draggedBRecord)
    this.aRecord.bRelation.addObject(draggedBRecord)
    /*this.aRecord.bRelation.addObject(this.store.createRecord('b', { title: 'bRecord4', rowOrderPosition: '4' }))
    */
    
  }

  dragulaconfig = {
    options: {
      copy: false,
      revertOnSpill: false,
      removeOnSpill: false,
    },

    enabledEvents: ['drag', 'drop'],
  };
}

models.a\.js

import Model from 'ember-data/model';
import { belongsTo, hasMany } from 'ember-data/relationships';
/*
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
*/

export default class extends Model {
  changeTracker = {only: ['bRelation'], auto: true};
  @hasMany('b') bRelation;
}

models.b\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
/*
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
*/

export default class extends Model {
	@attr('string') text;
	@attr('string') rowOrderPosition;
}

routes.application\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

templates.application\.hbs

      <EmberDragula
        class="flex flex-col gap-16"
        @config={{this.dragulaconfig}}
        @drop="onDrop"
        @dragulaEvent="dragulaEvent"
      >
        <EmberDragulaContainer
          @tagName="ul"
          class="flex flex-col gap-16"
        >
        {{!--<EmberDragula
          class="flex flex-col gap-16"
          @config={{this.dragulaconfig}}
          @drop={{this.onDrop}}
          as |d|
        >
          <d.Container
            class="flex flex-col gap-16"
          >--}}
        {{#each this.bRecords as |bRecord|}}
          <li data-stage-record-identifier={{
            call (fn this.recordIdentifierFor bRecord)
          }}>
            <div>
              <pre>title: {{bRecord.title}}</pre>
            </div>
            <div>
              <pre>identifier: {{call (fn this.recordIdentifierFor bRecord)}}</pre>
            </div>
            <div>
              <pre>rowOrderPosition: {{bRecord.rowOrderPosition}}</pre>
            </div>
            <button {{on "click" (fn this.bRecordDelete bRecord)}}>delete</button>
          </li>
         {{/each}}
        </EmberDragulaContainer>
      </EmberDragula>
      
      <style>
      li {
      	font-size: 12px;
      	padding: 10px;
        outline: 1px solid red;
      }
      
      button {
        margin-top: 10px;
        padding: 3px;
      }
      </style>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0",
    "ember-dragula": "1.9.3",
    "ember-composable-helpers": "4.4.1",
    "ember-data-change-tracker": "0.10.1",
    "tracked-built-ins": "1.1.1"
  }
}