New Twiddle

components.data-binding.js

import Ember from 'ember';

function logLifeCicle(name) {
  return function() {
    console.log(name, ...arguments);
  };
}

export default Ember.Component.extend({
  bar: 0,
  
  didUpdateAttrs: logLifeCicle('didUpdateAttrs'),
  didReceiveAttrs: logLifeCicle('didReceiveAttrs'),
  willUpdate: logLifeCicle('willUpdate'),
  willRender: logLifeCicle('willRender'),
  didUpdate: logLifeCicle('didUpdate'),
  didRender: logLifeCicle('didRender'),
  
  actions: {
    change() {
      // if comment out this line, mutation will be updated in template properly
      this.toggleProperty('foo');
      
      this.set('bar', Math.random());
      console.log(this.get('bar'));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  foo: true,
  bar: 0
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return false;
  }
});

templates.application.hbs

Foo: {{foo}}
<br>
Bar: {{bar}}

<hr>

<p>
	when have both two-way binding and one-way binding, <br>
  the one-way binding value will not display properly in template, <br>
  but if you open console, you will find it actually been mutated.
</p>
{{data-binding foo=foo bar=(readonly bar)}}

<p>have both two-way or both one-way doesn't have any problem:</p>
{{data-binding foo=foo bar=bar}}
<br>
{{data-binding foo=(readonly foo) bar=(readonly bar)}}

templates.components.data-binding.hbs

<button type="button" onclick={{action "change"}}>
	Foo: {{foo}} - Bar: {{bar}}
</button>

twiddle.json

{
  "version": "0.13.0",
  "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"
  }
}