Laravel and Vue templating error

I am using vue for the first time within laravel 5.3 and I am currently able to get my data using a Jquery AJAX request within vue however i am having some trouble displaying it. This is currently my script: This is my view:

<li>

    <!-- inner menu: contains the actual data -->

    <ul class="menu" id="messagesArea">
        <messages></messages>
    </ul>
</li>
<!-- Further Down the page -->
<template id="messages-template" v-for="messages in list">
  <p>
  @
  </p>
</template>
<script src="http://ift.tt/2ete4OX"></script>
<script type="text/javascript" src="/public/js/messages.js">

</script>

This is messages.js

Vue.component('messages', {
  template: '#messages-template',
  data: function (){
  return {
    list:[]
  };},
  created (){

    $.getJSON('ap/test', function(messages){
      this.list = messages;
    }.bind(this))
  }
});

new Vue({
  el: '#messagesArea'
});

This is what is recieved via the ajax:

list: Array[5]
0: Object
created_at: "2016-12-05 16:26:03"
id: 5
infoContent: "{\"rows\":2,\"content\":{\"Description\":{\"curSize\":12,\"name\":\"Description\",\"Type\":\"string\",\"isLarge\":false,\"value\":\"There was a problem with this!\",\"row\":1}}}"
name: "Issue 5"
progression: "1"
project: "7"
updated_at: "2016-12-05 16:26:03"
user: "1"
1: Object
created_at: "2016-12-05 16:25:45"
id: 4
infoContent: "{\"rows\":2,\"content\":{\"Description\":{\"curSize\":12,\"name\":\"Description\",\"Type\":\"string\",\"isLarge\":false,\"value\":\"There was a problem with this!\",\"row\":1}}}"
name: "Issue 4"
progression: "1"
project: "7"
updated_at: "2016-12-05 16:25:45"
user: "1"
2: Object
3: Object
4: Object

I am having trouble looping through theese and getting the data out of them. Could i get some help with this thanks.

Please ask if you need the whole view or anything else.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2gwklKr
via IFTTT