MASSIVE shout-out to @jenweber for helping me debug this throughout the day!
The problem was hiding in plain site at:
row.push(terms[i]);
As she explained , arrays of models have their own accessors. Therefore, we swapped that out for:
row.push(terms.objectAt(i));
And just like that, my 1-year old problem was SOLVED!
So the final code looked like:
// alpha-grid/component.js
import Component from '@ember/component';
import { computed } from '@ember/object';
export default Component.extend({
rows: computed('terms.[]', function() {
let terms = this.terms;
let columns = Math.floor(window.innerWidth / 100);
let itemsPerColumn = Math.ceil(terms.length / columns);
let rows = [];
for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {
let row = [];
for (let i = rowNumber; i < terms.length; i+= itemsPerColumn) {
row.push(terms.objectAt(i));
}
rows.push(row);
}
return rows;
}),
handleResize() {
this.notifyPropertyChange('rows');
},
didInsertElement() {
this.handleResize = this.handleResize.bind(this);
window.addEventListener('resize', this.handleResize);
},
willDestroyElement() {
window.removeEventListener('resize', this.handleResize);
}
});
{{!-- alpha-grid/template.hbs (includes TailwindCSS) }}
<div class="flex flex-wrap">
{{#each rows as |row|}}
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4 xxl:w-1/4 txl:w-1/4 txl:w-1/4 fxl:w-1/4">
{{#each row as |item|}}
<div>{{item.term}}</div>
{{/each}}
</div>
{{/each}}
</div>
{{!-- term/letter }}
{{alpha-grid terms=model}}
{{outlet}}
Thank you all!