Repro readOnly CP issue II

components.non-yielding-component.js

import Ember from 'ember';
const { computed } = Ember;
const { readOnly } = computed;

export default Ember.Component.extend({
  cost: readOnly('delayedCalculation.cost'),
  tax: readOnly('delayedCalculation.tax'),  
  total: computed('cost', 'tax', function() {
    return this.get('cost') + this.get('tax');
  }),
  delayedCalculation: computed(function() {
    let promise = Ember.RSVP.resolve({
      cost: 399.00,
      tax: 32.93
    });
    return DS.PromiseObject.create({ promise });
  })
});

components.yielding-comp.js

import Ember from 'ember';
const { computed } = Ember;
const { readOnly } = computed;

export default Ember.Component.extend({
  cost: readOnly('delayedCalculation.cost'),
  tax: readOnly('delayedCalculation.tax'),

  // One way to clear up the problem is to use the below CP definitions instead of the readOnly macros
  //  cost: computed('delayedCalculation.cost', function(){
  //    return this.get('delayedCalculation.cost');
  //  }),
  //  tax: computed('delayedCalculation.tax', function() {
  //    return this.get('delayedCalculation.tax') || 0;
  //  }),

  
  total: computed('cost', 'tax', function() {
    return this.get('cost') + this.get('tax');
  }),
  delayedCalculation: computed(function() {
    let promise = Ember.RSVP.resolve({
      cost: 399.00,
      tax: 32.93
    });
    return DS.PromiseObject.create({ promise });
  })
});

templates.application.hbs

<h2>Doesn't update tax as expected</h2>
{{#yielding-comp as |total cost tax|}}
  <div>cost: {{cost}}</div>
  <div>tax: {{tax}}</div>
  <div>total: {{total}}</div>
{{/yielding-comp}}

<div>~</div>

<h2>Doesn't Update cost as Expected</h2>
<p>Only difference with the above is the order of the properties in the template</p>
{{#yielding-comp as |total cost tax|}}
  <div>tax: {{tax}}</div>
  <div>cost: {{cost}}</div>
  <div>total: {{total}}</div>
{{/yielding-comp}}

<div>~</div>

<p>The problem is also reproducible without a component that yields -- it seems to be about the order of consumption:</p>

{{non-yielding-component}}

templates.components.non-yielding-component.hbs

  <div>tax: {{tax}}</div>
  <div>cost: {{cost}}</div>
  <div>total: {{total}}</div>

templates.components.yielding-comp.hbs

{{yield total cost tax}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://s3.amazonaws.com/builds.emberjs.com/release/ember.prod.js",
    "ember-data": "2.9.0",
    "ember-template-compiler": "release",
    "ember-testing": "release"
  },
  "addons": {}
}