Unable to show data from server into my template

I have a page which needs to display a list of students details. I have a json file which contains the students data. i am calling the json file using app.request.json. it is showing data in console but not in my template. Below is my code
Route code

{
path: ‘/students/’,
componentUrl: ‘./pages/students.html’,
}

Template/Page Code

Hello
<div class="page-content">
  <div class="list simple-list">
    <ul>
      {{#each dataArray}}
        <li>{{this}}</li>
      {{/each}}
    </ul>
  </div>
</div>

return {
data () {
return {
dataArray: []
}
},
on: {
pageInit: function (e, page) {
this.getUserData()
console.log('getting students list ')
}
},
methods: {
getUserData () {
var self = this;
app.request.json(‘http://consultthings.co/api/list.json’, function (res){
self.dataArray.push(res)
console.log(res)
})
}
}
}

Please Help me. @nolimits4web .
I just want to show my json data in thee template. The console is showing the data from server but thee each loop in template not showing anything.

https://framework7.io/docs/router-component.html