Calculator - ObservableArray doesn't work as expected?

[Siem van den Berg]

Hi, I'm building a calculator app for a game with Knockout and I'm really enjoying it. However I'm running into a problem and I hope someone can help me.

In my earlier version (http://siemvandenberg.com/mithril/) you can see that when you change the value of a 'buff', the value of the 'stat' updates accordingly. Also when you change the affected 'stat' the change is also reflected.

Now in this jsfiddle (https://jsfiddle.net/edkw2hzq/) I have made some updates so that a single 'buff' can affect multiple 'stats'. I'm trying to pass an array when creating the 'buff' object like this:

new Buff("Magic Weapon", true, [self.availableBuffs[3], self.availableBuffs[4]], [5, 5]);

And make them observable in the Buff function:

function Buff(name, active, buffedStats, buffedValues) {
    var self = this;
    self.name = ko.observable(name);
    self.active = ko.observable(active);
    self.buffedStats = ko.observableArray(buffedStats);
    self.buffedValues = ko.observableArray(buffedValues);
}

I bind the controls as such:

<td class="col-3" data-bind="foreach: { data: buffedStats, as: 'buffedStat' }">
<select data-bind="options: $root.availableBuffs, value: buffedStat, optionsText: 'valueName'"></select></td>

On the first render everything calculates correctly but when I change the values things don't update accordingly.

If somebody can take a look at my jsfiddle (https://jsfiddle.net/edkw2hzq/) I would really appreciate that :)