EmberJS: toggleProperty set all properties of a Component to a default value

I'm trying to implement nested components in Ember 2.0.1, but I'm getting a strange behavior when use toggleProperty function inside of the action handler.

The first component looks like:

// ./components/comp-1.js
import Ember from 'ember';

export default Ember.Component.extend({
  prop1: false,
  hello: "Default text of comp-1",

  _changeHello: function() {
    this.set('hello', 'Text set by comp-1');
  }.on("init"),

  actions: {
    customAction1() {
      this.toggleProperty('prop1');
    }
  }
});

.

// ./templates/components/comp-1.hbs
<button {{action 'customAction1'}}>{{hello}}</button>

The second one is:

// ./components/comp-2.js
import Ember from 'ember';

export default Ember.Component.extend({
  data: [],

  _doSomeImportentStuff: function() {
    var data = this.get('data');

    data = [{name: 'Text set by comp-2', bool: false}, 
            {name: 'Text set by comp-2', bool: true}];

    this.set('data', data);
  }.on("init")
});

.

// ./templates/components/comp-2.hbs
{{#each data as |d|}}
{{comp-1 hello=d.name prop1=d.bool}}
{{/each}}

The component comp-2 creates two buttons with names Text set by comp-1. If I click on a button the text changes to Text set by comp-2 because of the execution of function this.toggleProperty('prop1') that is called in the action handler customAction1. If I remove this function or remove the setting of prop1 from ./templates/components/comp-2.hbs then everything works as expected, i.e. text of the buttons stays always as Text set by comp-1.

Why does toggleProperty function set back other properties?

Am I doing something wrong?

The behavior in action can be seen here: http://ift.tt/1EC4nsI