Refresh a route's @model – this one re-renders the template with the new song

application.hbs

<div class="h-screen w-full bg-blue-800 text-gray-100">
  <div class="w-full xl:w-1/3 mx-auto">
    <div class="h-12 flex items-center mb-4 border-b-2">
      <h1 class="font-bold text-2xl">Rock & Roll <span class="font-normal">with Ember.js</span></h1>
    </div>
    <div class="w-full">
      <div class="">
        <ul>
          {{#each @model as |song|}}
            <li>
              {{song.name}} by {{song.band}}
              <span class="float-right">{{song.rating}}</span>
            </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</div>
{{outlet}}

application.js

import Route from '@ember/routing/route';

let songs = [
  { name: 'Black Dog', band: 'Led Zeppelin', rating: 3 },
  { name: 'Yellow Ledbetter', band: 'Pearl Jam', rating: 4 },
  { name: "Baba O'Riley", band: 'The Who', rating: 4 },
];

let count = 0;

export default class ApplicationRoute extends Route {
  model() {
    if (count === 0) {
      count++;
      setTimeout(() => { this.refresh() }, 3000);
      return songs;
    } else  {
      return [...songs, { name: 'Brother', band: 'Alice in Chains', rating: 5 }];
    }
  }
}