Component black magic

components.not-working-comp.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  // This is not working.
  value: Ember.computed('object', 'propertyName', function() {
    let prop = Ember.get(this, 'propertyName');
    return Ember.get(this, `object.${prop}`);
  }).volatile()
  
});

components.parent-comp.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.working-comp.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  // This works:
  // 1. Why?
  // 2. Not sure this is the best approach
  didReceiveAttrs() {
  	this._super(...arguments);
    let prop = Ember.get(this, 'propertyName');
    
    Ember.mixin(this, {
    	value: Ember.computed.reads(`object.${prop}`)
    });
  }
  
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	return Ember.Object.create({
    	name: 'Black Magic'
    })
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

templates.application.hbs

<label for='change-me'>Change me: </label>
<input id='change-me' value={{model.name}} oninput={{action (mut model.name) value="target.value"}}>

<hr>

{{#parent-comp object=model as |p|}}
	{{p.working-comp propertyName='name'}}
{{/parent-comp}}

<hr>

{{#parent-comp object=model as |p|}}
	{{p.not-working-comp propertyName='name'}}
{{/parent-comp}}

templates.components.not-working-comp.hbs

<h4>Not working component</h4>

<p>
	I'm computing my value from <code>model</code> using the proprety <code>{{propertyName}}</code>.
</p>

<p>
  My value is: <code>{{value}}</code>.
</p>

templates.components.parent-comp.hbs

{{yield (hash
	working-comp=(component 'working-comp'
  	object=object
  )
  not-working-comp=(component 'not-working-comp'
  	object=object
  )
)}}

templates.components.working-comp.hbs

<h4>Working component</h4>

<p>
	I'm computing my value from <code>model</code> using the proprety <code>{{propertyName}}</code>.
</p>

<p>
  My value is: <code>{{value}}</code>.
</p>

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": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}