Vue formulate computed property not breaking out of loop

I am fairly new to Vue and trying to use a computed property with the code below:

https://codepen.io/jason123456/pen/BazpMZd

Select the Traditional size from the drop down and then increase the quantity from 1 to 2.

When quantity is 2 the price should display as $2 as quantity is < 100, however it's picking up the 2nd index in the array and doing 2 * 5 = $10.

It's like the break statement is being skipped.

I have tested the computeCalendarPrice() function seperately and cannot see a problem in the logic if I call it outside of Vue, so I think I have got the reactivity piece wrong perhaps.

Would really appreciate some help!

Seems computeCalendarPrice function is not correct, look in the if statement. it is checking string values. you need to convert them to an integer.

for (var i = 0; i < arr.length; i++) {
    if (Number(values.calendar_qty) <= Number(arr[i])) {
      price = range[arr[i]];
      break;
    }
  }