Ember Power Select belongsTo Async Issue

components.test-component\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { later } from '@ember/runloop';

export default class extends Component {
  @tracked log;
  @service store;
  @tracked record;
  options;
  constructor() {
    super(...arguments);
    this.options = this.store.findAll('dummyrelationship');
    this.record = this.store.findRecord('dummy',1);
  };
  @action refresh() {
    const oldRecord = this.record;
    this.record = null;
    later(() => this.record = oldRecord,500);
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
	constructor() {
    super(...arguments);
    $.mockjax({
      url: '/dummies/1',
      responseTime: 100,
      responseText: {
        data: {
          type: "dummy",
          id: 1,
          attributes: {
            "name": "Bob"
          },
          relationships: {
            other: {
              data: {
                type: "dummyrelationship",
                id: 2
              }
            }
          }
        }
      }
    });
    $.mockjax({
      url: '/dummyrelationships/2',
      responseTime: 1000,
      responseText: {
        data: {
          type: "dummyrelationship",
          id: 2,
          attributes: {
            "othername": "Other"
          }
        }
      }
    });
    $.mockjax({
      url: '/dummyrelationships',
      responseTime: 1000,
      responseText: {
        data: [{
          type: "dummyrelationship",
          id: 2,
          attributes: {
            "othername": "Other"
          }
        },{
          type: "dummyrelationship",
          id: 33,
          attributes: {
            "othername": "ThirtyThree"
          }
        },{
          type: "dummyrelationship",
          id: 44,
          attributes: {
            "othername": "FourtyFour"
          }
        }]
      }
    });
  }
}

models.dummy\.js

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

export default class extends Model {
  @attr("string") name
  @belongsTo('dummyrelationship') other
}

models.dummyrelationship\.js

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

export default class extends Model {
  @attr("string") othername
}

templates.application\.hbs

{{test-component}}

templates.components.test-component\.hbs

<h1>Testing Ember Power Select</h1>
<h3>with async selected value (belongsTo relationship)</h3>

<button onclick={{action 'refresh'}}>Refresh</button>
{{#if record}}
	<table>
  <tr>
  	<td>Name:</td>
    <td>{{record.name}}</td>
    <td>(immediate)</td>
  </tr>
  <tr>
  	<td>Related:</td>
    <td>{{record.other.othername}}</td>
    <td>(1s load delay)</td>
  </tr>
  <tr>
  	<td>Picker:</td>
    <td>
	{{#power-select-typeahead 
  options=options
  searchField="othername"
  extra=(hash labelPath="othername")
  selected=record.other
  onChange=(action (mut record.other)) as |thing|}}
		{{thing.othername}}
	{{/power-select-typeahead}}

    </td>
    <td>(1s load delay)</td>
  </tr>
  </table>
{{/if}}

<br/>
<div style="border: solid darkred 1px; color: darkred; padding: 0.5em;">
The above shows the behaviour of the powerselect when an async property is used -- the belongsTo of a record.

On first load (when the belongsTo value has not yet been loaded), it does not (ever) render in the picker.

Clicking the 'Refresh' button (which forces a re-render, but not a reload of the record) works, because the belongsTo has now been loaded, and is available.
</div>

twiddle\.json

{
  "version": "0.17.0",
  "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.3.1/jquery.js",
    "ember": "3.12.2",
    "ember-template-compiler": "3.12.2",
    "ember-testing": "3.12.2",
    "jquery-mockjax": "https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.mockjax.min.js"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.12.5",
    "ember-power-select": "3.0.6",
    "ember-power-select-typeahead": "0.8.0"
  }
}