Computed Oddity

components.my-component.js

import Component from 'ember-component';
import computed from 'ember-computed';

export default Component.extend({
  didReceiveAttrs() {
    this._super(...arguments);
		
    // Comment this line to fix
    this.get('sum');
    
    this.set('number', this.get('my-attr'));
  },

  sum: computed('number', function() {
    console.log('computing', this.get('number'));
    
    return this.get('number') + 10;
  })
});

controllers.application.js

import Controller from 'ember-controller';

export default Controller.extend({
  number: 0,
  
  actions: {
   	inc() {
      this.incrementProperty('number'); 
    }
  }
});

styles.app.css

div { display: inline }

templates.application.hbs

Controller incoming attr: 
{{number}}

<button onclick={{action 'inc'}}>Change attr</button>

<br><br>

<hr>

<br>

Component computed property (should be 10):
{{my-component my-attr=number}}

<br><br>

templates.components.my-component.hbs

{{sum}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "release",
    "ember-template-compiler": "release",
    "ember-testing": "release"
  }
}