Getting and Display Records from API - Any Solution?

I am trying to display list of tracks for each album, it is working in the API but not with VUE Template

<ul class="tracklist">
                <li class='tracklistRow' v-if="album in albums">    
                    <div class='trackCount'>
                        <img class='play' src='/assets/images/icons/play-white.png' onclick='playSong()'>
                        <img class='pause' src='/assets/images/icons/pause.png' style='display:none;' onclick='pauseSong()'>
                        <span class='trackNumber'>{{ album.track.id }}</span>
                    </div>                      
                        <div class='trackInfo'>
                            <span class='trackName'>{{ album.track.track.title }}</span>
                        </div>  
                    <div class='trackOptions'>
                        <img class='optionsButton' src='/assets/images/icons/more.png'>
                    </div>

                    <div class='trackDuration'>
                        <span class='duration'>{{ album.track.track.duration }}</span>
                    </div>
                </li>
                <div class="rLabel" v-if="album">
                    &copy; {{ album.albumDetails.recordlabel }}
                </div>
            </ul>

<script>
    import axios from 'axios';

    export default {
        name: 'album',

        props:['id'],
        data: function(){
            return {
                album: null,
                albums: []
            }
        },
        methods: {
            getData(){
                var that = this
                axios.get('http://api.localhost/api/album/'+this.id)
                    .then(function (response){
                        that.album = response.data.data;
                    })

            }
        },
        mounted: function(){
            this.getData()
        }
    }


</script>

Can someone tell me what i am doing wrong.