Manipulating Ember Model in Component

To control the layout of a page, I'm attempting to pass a model to an Ember component and splicing it into groups. I can't figure out how without have to access content._data and essentially recreating the model. The rough code:

parentRoute.js

export default Ember.Route.extend({
  model() {
    return this.store.findAll('item');
  }
});

parentRoute.hbs

childComponent.js

export default Ember.Component.extend({
    groupedItems: Ember.computed(function() {
        // convert model data into array of objects
        let allItemss = this.get('model.content').map(function(obj){
            let mappedObj = obj._data;
            mappedObj.id = obj.id;
            return mappedObj;
        });

        // group into arrays of up to 3 for layout
        let groupedItems = [];
        while(allItems.length){
            groupedItems.push(allItems.splice(0,3));
        }

        return groupedItems;
    })
});

childComponent.hbs

        
        <div class="item-group-">
            <h2 class="headliner">
                 
            </h2>
        </div>
        

Is there a better way to do this? I can't seem to get .then() to work with this.get('model'), and the item itself can't be spliced as it's an object, not an array.