Emberjs 2.0+ update route model with new data from store (createRecord)

I am new to Ember, so my approach can be incorrect. I am using latest Ember 2.9.1

My plan is to update route's model and cause all components to render newly added/saved item in a collection.

(I want to update my route's model (userRoles array) with a new record of userRole after I have call save (on createRecord)).

So far I have a route that has a model like this:

model(){
  // this is my "user.edit" route
  let user = this.modelFor('user');
  let newUserRole = this.get('store').createRecord('userRole');
  newUserRole.set('user_id', user.get('id'));

  return RSVP.hash({
    user: user,
    userRoles: store.query('userRole', { user_id: user.get('id') }),
    roles: store.findAll('role'),
    newUserRole: newUserRole
  });
}

I then have a controller and couple of components that modify newUserRole. In a route I have an action for saving new user role:

actions: {
  saveNewUserRole: function () {
    let currentModel = this.modelFor('user.edit');
    currentModel.newUserRole.save().then(function (newUserRole) {
      currentModel.userRoles.addObject(newUserRole);
    });
  }
}

What's interesting is that a new item (newUserRole) gets added to a collection, but in console logging of model tells me that the new object is kind of different from other objects in the collection. Looking through similar issues for ember I find that people use: _internalModel or toArray(): here and here or services (?) for storing/updating data.

(also changed from using pushObject to addObject (v1.3+); plus observers listening for userRoles changes don't get triggered inside of components, or if I call toArray() I get 'Invalid value used as weak map key' error)

Question: What is the correct/Ember way to update my route's model with new item and cause to re-render my template. If I should use services for data, should service keep all items in a toArray() or POJOs?