Observer doesn't fire in component

I have next code in a controller:

...
  selectedIngredientsIds: [],

  barItemsChanged: Ember.observer('user.barItems.[]', function() {
    let ingredients = [];
    if (this.get('user').get('barItems')) {
      ingredients = this.get('user').get('barItems').map(function(item) {
        return item.ingredientId;
      });
    }

    this.set('selectedIngredientsIds', ingredients);
  })
...

And template:

  {{ingredient-chooser multiple=false ingredients=ingredients changeIngredients="changeIngredients"
  needToClear=needToClear placeholder="Добавить в бар..." selectedIngredients=selectedIngredients
  selectedIngredientsIds=selectedIngredientsIds ingredientSelected="ingredientSelected"}}

And ingredient-chooser component:

...
  selectedIngredients: [],
  selectedIngredientsIds: [],

  selectedIngredientsChanged: Ember.observer('selectedIngredients.[]', function() {
    this.sendAction("changeIngredients", this.get('selectedIngredients'));
  }),

  selectedIngredientsIdsChanged: Ember.observer('selectedIngredientsIds.[]', function() {
    let self = this;
    let ingredients = this.get('selectedIngredientsIds').map(findIngredientByRealId);
    this.set('selectedIngredients', ingredients);
  })
...

barItemsChanged observer works fine. selectedIngredientsChanged also works fine. Even if I check selectedIngredientsIds property it shows correct value. But for some reasons selectedIngredientsIdsChanged observer never called.

What I'm doing wrong?