ember.js `afterModel` event handler changes not reflected in Template

I have a route in which I use Ajax (not Ember Data) to pull a record, a costcentre, off the server. The record is intended to populate a template for subsequent edits.

Before the fetch, in beforeModel, an empty costcentre is created using createRecord. After the model processing is complete, in afterModel, the returned data is used to populate the costcentre object in the Data Store.

The fetch of the data is successful and in the debugger the update of the locally stored DS object can be seen to have worked but the changes are not seen in the template.

How can I get the template to populate with the data returned from the server ?

In the route I have this :

  beforeModel: function(transition) {
    this.set('ccToEdit', this.store.createRecord('costcentre'));
  },

  model(params) {
      return getCCByCCIdent(    this.urlbase,
                                this.currentMOP.currentMOP,
                                ENV.APP.MATClientCode,
                                params.cceIdentifier_to_edit);
  },
  afterModel(ccs, transition) {
    //I'm testing this with an API end point that returns a
    //list but there will only ever be one item in the list

    this.ccToEdit.setProperties(ccs[0]);
  },

The getCCByCCIdent looks like this :

export const getCCByCCIdent = function(urlbase, currentMOP, clientCode, targetCostCentreIdent) {

  return new Promise(function (resolve, reject) {
    if (targetCostCentreIdent.length == 0)
    {
      resolve([])
    }
    else
    {
      var theUrl = `${urlbase}/costcentres/${currentMOP}/${clientCode}/${targetCostCentreIdent}`;
      $.ajax({
        type: 'GET',
        url: theUrl,
        success: function (response) {
          resolve(response);
          },
        error: function (request, textStatus, error) {
          reject(error);
          }
        });
    }
  })
}