Emberjs Mirage Data - Cannot seem to replicate tutorial

I've recently finished the Emberjs tutorial and want to replicate it without following the tutorial to solidify the leanings.

I cannot seem to get the mirage data or even straight route.js data to work in my .hbs file.

mirage/config.js

   export default function() {

  this.namespace = '/api'

  this.get('/job-opening', function() {
    return {
      data: [{
        type: 'job-opening',
        id: 12,
        attributes: {
          title: 'Cleaner',
          employer: 'Dirty Co.'
        }
      }, {
        type: 'job-opening',
        id: 54,
        attributes: {
          title: 'Production Master',
          employer: 'We Make Things Inc.'
        }
      }, {
        type: 'job-opening',
        id: 3,
        attributes: {
          title: 'King of the Hill',
          employer: 'Mount Everest LLC'
        }
      }, {
        type: 'job-opening',
        id: 231,
        attributes: {
          title: 'Garbage Person',
          employer: 'Try to be a better person pty ltd'
        }
      }]
    }
  })

adapters//application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

routes/job-opening.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr(),
  employer: DS.attr(),
});

job-opening.js

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

export default Route.extend({
  model() {
    return this.store.findAll('job-opening')
  }
});

templates/job-opening.hbs

Doesn't seem to load at all, I assume error in the job-opening.js because when I copy the data from mirage.js and move it straight into the job-opening.js and remove this.store.findAll('job-opening') it will load the hardcoded html.

<div>"Hello World!"</div>


  <h3></h3>
  <h3></h3>
  <br>


<br>
<div>"Goobye Cruel World!"</div>

This makes me thing it's something wrong with how I have mirage setup or maybe the model. I've tried restart the ember server. Currently in development. I've also tried to re-read the tutorial and looked around on stack and didn't find anything. Feel like I've made a simple mistake somewhere..

My goal here is just to get the data on screen with no formatting.

Thanks in advance for any and all help.

Update.. to show what I mean when I add in hardcoded values..

routes/job-opening.js This will produce html when I load the page like below. but no model values..

"Hello World!"

"Goobye Cruel World!"

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

export default Route.extend({
  model() {
    //return this.store.findAll('job-opening')
    return {
      data: [{
        type: 'job-opening',
        id: 12,
        attributes: {
          title: 'Cleaner',
          employer: 'Dirty Co.'
        }
      }, {
        type: 'job-opening',
        id: 54,
        attributes: {
          title: 'Production Master',
          employer: 'We Make Things Inc.'
        }
      }, {
        type: 'job-opening',
        id: 3,
        attributes: {
          title: 'King of the Hill',
          employer: 'Mount Everest LLC'
        }
      }, {
        type: 'job-opening',
        id: 231,
        attributes: {
          title: 'Garbage Person',
          employer: 'Try to be a better person pty ltd'
        }
      }]
    }
  }
});