Ember-cli nested model array using {{each}} helper re-renders whole list when adding to Ember data store

Question

I have a route that loads a dashboard

// routes/dashboard/index.js
...
  model: function(params) {
    return this.store.find('dashboard', params.dashboard_id);
  }
...

The dashboard model contains a hasMany relationship to the widget model

// models/dashboard.js
...
DS.Model.extend({
  widgets: hasMany('widget', {async: true})
...

The widget model contains a belongsTo relationship to the dashboard model

// models/widget.js
...
DS.Model.extend({
  dashboard: belongsTo('dashboard', {async: true})
...

The dashboard.index template renders the widgets using the {{each}} helper

// templates/dashboard/index.js
...
{{#each model.widgets as |widget|}}
  {{widget config="widget"}}
{{/each}}
...

The user can add a widget to their dashboard

// routes/dashboard/index.js
...
actions: {
  addWidget: function() {
    this.store.createRecord('widget', {
      dashboard: this.modelFor('dashboard.index')
      ...
    });
  }
}

Although this works, when the new widget is created, ALL widgets are re-rendered.

Some things of note: - I have not implemented a View or Controller. - If I change the implementation to return just a collection of widgets, causing ember-cli to create an ArrayController rather than an ObjectController, the each loop does not re-render (excellent). However, dashboards have more than one child array that needs to be rendered, and so I cannot take this approach. - Despite efforts to implement the object controller and create my own array controllers, I cannot get the same functionality here.

Any suggestions of how I can add widgets without all widgets re-rendering?