Vue Object is Empty

I'm using Vuejs to display data from an API to a template. I'm trying to figure out why I am not returning data for the team so I can display in for the template. Right now when I use the VueJS Chrome Extention it shows that the team is an empty object.

<div v-if="team">
    <div class="row">
       <div class="col-12 col-sm-12">
          <div class="fw-700 pb3 mb5" style="border-bottom: 1px solid #333;">Name:</div>
       <div class="mb10" style="font-size: 20px;"></div>
   </div>
</div>


<script>

    module.exports = {
        http: {
            headers: {
               'X-CSRF-TOKEN': window.Laravel.csrfToken
            }
        },
        props: [ 'id', 'editable' ],
        data: function(){
            return {
                modalName: 'additionalInfo',
                team:{

                }
            }
        };
     },
     methods: {
         fetchInfo: function(){
             this.$http.get('/api/teams/info', { params: { id: this.id } }).then((response) => {
             this.team = response.data;
         });
      },
    },
  }
}
</script>

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