New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Notifying a property change on a property passed into a child component',
  description: 'There is a parent component with some buttons. When a user clicks on a button, the buttons\'s action changes the property. Since the changed property is passed into the wrapped component, you would expect that it\'s observer would fire also. But it does not. To try this, just type in 1233 and you will see that the last 3 will not render.'
});

application.template.hbs

<h1>{{appName}}</h1>
<p>{{description}}</p>
{{pin-entry}}

pin-entry.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  pinValue: null,
  counter: 0,
  numbers: [1, 2, 3, 4, 5],
  actions: {
    addNumber: function (number) {
      let counter = this.get('counter');
      this.set('pinValue', number);
      this.set('counter', counter + 1);
    }
  }
});

pin-entry.template.hbs

{{pin-input pinValue=pinValue counter = counter}}
{{#each numbers as |num|}}
  <button {{action "addNumber" num}}>{{num}}</button>
{{/each}}

pin-input.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  value: null,
  pinValue: null,

  onDidChangeInput: function() {
    var current = this.$('input').val();
    this.set('value', current + this.get('pinValue'));
  }.observes('counter')
});

pin-input.template.hbs

<input type=text value={{value}}>

twiddle.json

{
  "version": "0.4.14",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}