value not binding with array object

I have an app that deals with ordering coffee. The coffee store has a table that shows drink types by size, and they can click on a given drink/size and edit data about that drink/size combo, such as the price.

Before, there was a set list of coffee drinks (mocha, cappuccino, etc) and I was able to gasp hardcode the drinks and get by this bug. However, things have changed and now the store can add custom drinks, meaning that I can no longer hardcode the drinks and I need to get the store drinks from the API.

This project is using Ember 1.13, and I'm setting the drinks in the setupController in the route. In this example I'm not going to be showing the custom drinks, the problem is reproducible just by using the default drinks.

setupController: function(controller, model) {

// we have some set drinks that will be for every store, although they can set inactive
let defaultDrinks = [
  "Americano", "Capuccino", "Drip", "Espresso", "Latte", "Mocha", "Tea"
];
let drinksArray = [];
let drinkType, keyName;

let pluralize = function(string){
  // return plural and lower case for a drink type
  let lower = string.toLowerCase();
  let plural = lower + "s";
  return plural;
};

for (let i = 0; i < defaultDrinks.length; i++) {
  drinkType = defaultDrinks[i];
  keyName = pluralize(drinkType);

  // when we define like this, there are bugs editing in the template. But we 
  // can loop though all the drinks by type. I can get a list of custom drinks
  // from the API and add those into the loop.

  drinksArray[keyName] = this.store.filter('store-drink', function(drink) {
    return drink.get('type') === drinkType;
  });
}

// when we define like this (hardcode), it works fine in template but we
// can't keep doing this because with custom drinks we don't know the type
// when we get the above loop working, this code will be gone, but it shows
// what works in the template to edit drinks.

let cappuccinos = this.store.filter('store-drink', function(drink) {
  return drink.get('type') === "Cappuccino";
});

...

console.log(drinksArray["mochas"], cappuccinos);

controller.setProperties({
  'mochas': drinksArray["mochas"],
  'cappuccinos': cappuccinos,
  ...

  'myStore': model.myStore,
});

There's the setup in the route. Now in the template I have an input that is tied to the drink value. When they click on one of the drink/size combos, it opens a div that has the detailDrink object. .

When the drink uses the drinkList in the form of cappuccino everything works fine. When the drink uses the drinkList in the form of drinksArray["mochas"] then when the input changes, there are various bugs. I don't believe the details of this part to be significant but sometimes it deletes the cell value, sometimes it doesn't reflect the change, and sometimes it binds multiple cells to the same value. The issue is that when using the data from an array (such as with mochas) this bug is there, and when using the hardcoded value (such as with cappuccinos) the drink data can be updated correctly.

Another thing to note is that in the console.log(drinksArray["mochas"], cappuccinos); above, both objects appear to be the same, other than of course one is a list of cappuccinos and the other is a list of mochas.

I've literally been stuck on this for months off-and-on, and have tried so many things and have isolated it down to this.