Ember: Accessing many to many data from template

I'm struggling to understand how to get the data from two related models to display.

I have a recipe that can have many tags and a tag that can have many recipes:

//models/recipe.js
export default DS.Model.extend({
  name: DS.attr('string'),
  tags: DS.hasMany('tag')
});

//models/tag.js
export default DS.Model.extend({
  name: DS.attr('string'),
  tags: DS.hasMany('recipe')
});

I am trying to do something like this from my recipes route (via a component):

//templates/components/list-recipes.hbs
<ul>
  
    <li> -    </li>
  
</ul>

//templates/recipes.hbs

If I output I get a <DS.PromiseManyArray>.

How can I resolve this promise?

I tried adding {include: tags} to my recipes route - but it does not seem to make a difference:

//routes/recipes.js
export default Route.extend({
  model() {
    return this.get('store').findAll('recipe', {include: 'tags'});
  }
});

Thanks in advance