Ember model data not shown in template

I have a problem displaying model data inside the template. Here's my code:

1. /routes/index.js

import Ember from 'ember';

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

2. /adapters/application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
    defaultSerializer: 'JSONSerializer'
});

3. /serializers/application.js

import DS from 'ember-data';

export default DS.JSONSerializer.extend({});

4. /templates/index.hbs

{{#each video in model.store}}
    <p>{{video.title}}</p>
{{/each}}

however the data is not shown. I have checked the response from the server and it's a valid jsonapi.org format response. I tested by returning an Ember.Object from /router/index.js:model() and the data renders just fine. I'm confused why ember can't access the data from the store when I have specified to use JSONSerializer but renders when data returns as an array of objects. Any ideas?