Arrays not updating when elements are modified

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

application.template.hbs

<p>Uh</p>
{{main-page}}

box-container.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  title: 'hey',
  box: [],
  otherBox: []
});

box-container.template.hbs

<div class="box-container">
  <h2>{{title}}</h2>
  {{#each box as |item|}}

    {{box-item boxItem=item box=box otherBox=otherBox moveSome=(action moveSome)}}

  {{/each}}
</div>

box-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['box-item'],
  title: Ember.computed('boxItem.title', function() {
    return this.get('boxItem.title');
  }),
  sku: Ember.computed('boxItem.sku', function() {
    return this.get('boxItem.sku');
  }),
  quantity: Ember.computed('boxItem.quantity', function() {
    return this.get('boxItem.quantity');
  })
});

box-item.template.hbs

<div>{{title}} - {{sku}}</div>
<div>Quantity: {{quantity}}</div>

<div class="controls">
	<button {{action moveSome boxItem box otherBox 1}}>Move 1/{{quantity}} to other box</button>
  <button {{action moveSome boxItem box otherBox quantity}}>Move {{quantity}} (all) to other box</button>
</div>

main-page.component.js

import Ember from 'ember';

let BoxItem = Ember.Object.extend({
	title: 'title',
  sku: 'sku',
  quantity: 1
});

export default Ember.Component.extend({
  boxOne: [
    BoxItem.create({ title:'Sweatshirt', sku:'ss-01', quantity: 1}),
    BoxItem.create({ title:'Jeans', sku:'je-01', quantity: 7})
  ],
  boxTwo: [],
  actions: {
    moveSome(boxItem, fromBox, destinationBox, amount) {
      var existing = destinationBox.findBy('sku', boxItem.get('sku'));
      if(existing != null) {
        //if an item with the same sku exists in te destination box, modify its quantity
        existing.set('quantity', existing.get('quantity') + amount);
        Ember.Logger.info('Setting pre-existing boxItem in desinationBox to quantity:', existing.get('quantity'));
      } else {
        //otherwise make a new item
        destinationBox.pushObject(BoxItem.create({ 
          title: boxItem.get('title'),
          sku: boxItem.get('sku'),
          quantity: amount
        }));
        Ember.Logger.info('Pushing new item to destinationBox with quantity:', amount);
      }
      
      if(boxItem.get('quantity') <= amount) {
        //if we moved all we have, remove the old item
        Ember.Logger.info('Removing old item now that its out of quantity.', boxItem);
        fromBox.removeObject(boxItem);
      } else {
        //just remove some quantity
        Ember.Logger.info('Reducing quantity of', boxItem, 'by amount', amount);
        boxItem.set('quantity', boxItem.get('quantity') - amount);
      }
    }
  }
});

main-page.template.hbs

<h1>Array probs</h1>
<p>Modifying an item in array doesn't refresh, but changing the length of the array does cause refresh.</p>

{{box-container title="Box 1" box=boxOne otherBox=boxTwo moveSome=(action "moveSome")}}
{{box-container title="Box 2" box=boxTwo otherBox=boxOne moveSome=(action "moveSome")}}

styles.app.css

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

.box-item {
  padding: 1em;
  background: #EEE;
  margin-bottom: 2em;
}

.box-item .controls { 
  margin-top: 1em;
}

twiddle.json

{
  "version": "0.6.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}