title: Vuejs and Request: Computed property function doesnt display GET JSON value
body: <p>I have a Vue instance.</p>
  
  <pre><code>// create a root instance
  var app = new Vue({
      el: '#app',
      data:
      {
          album: '',
          artist: '',
          link: '',
          genre: '',
          rating: '',
          genres: ["Memphis Rap", "R&amp;B\Soul", "Pop", "Vaporwave", "Alt-Lat"],
          length: 0
      },
      methods: {
          addAlbum: function (event) {
              this.youtubeAlbumList.push({ album: this.album, artist: this.artist, link: this.link, genre: this.genre, rating: this.rating });
              request.post(
                  'http://localhost:3000/album',
                  { json: { album: this.album, artist: this.artist, link: this.link, genre: this.genre, rating: this.rating } },
                  function (error, response, body) {
                      if (!error &amp;&amp; response.statusCode == 201) {
                          console.log(body)
                      }
                  }
              );
              this.length = this.youtubeAlbumList.length;
              this.album = '';
              this.link = '';
              this.genre = 'Genre';
              this.rating = '';
          }
      },
      computed: {
          albumList:
          {
              get: function () {
                  request.get(
                      'http://localhost:3000/album',
                      function (err, res, body) {
                          var info = JSON.parse(body);
                          //.forEach(function(obj) { console.log(obj.id); });
                          return info;
                      }
                  )
              }
          }
      }
  });
  </code></pre>
  
  <p>I'm trying to populate the 'albumList' using Request's get method. The server successfully returns 200 Status Code. In the Developer Tools, I see that the JSON is returning.</p>
  
  <p><a href="https://i.stack.imgur.com/41RgI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/41RgI.png" alt="enter image description here"></a></p>
  
  <p>The issue is that the list (albeit short) is not rendering on the page. To render the list, I used the following components:</p>
  
  <pre><code>Vue.component('album-component', {
      template: ` 
      &lt;div class="content"&gt;
              &lt;div class="col-sm-6 col-md-4"&gt;
                      &lt;div class="thumbnail"&gt;
                      &lt;img src="#" alt="#"&gt;
                      &lt;div class="caption"&gt;
                          &lt;h3&gt;{{x.album}}&lt;/h3&gt;
                          &lt;div class="message-body"&gt;
                              &lt;h2&gt;Artist:&amp;nbsp{{x.artist}}&lt;/h2&gt;
                              &lt;h3&gt;Link:&amp;nbsp&lt;a v-bind:href="x.link"&gt;Link&lt;/a&gt;&lt;/h3&gt;
                              &lt;div&gt;Genre:&amp;nbsp{{x.genre}}&lt;/div&gt;
                              &lt;div&gt;Rating:&amp;nbsp{{x.rating}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;p&gt;&lt;a href="#" class="btn btn-primary" role="button"&gt;Button&lt;/a&gt; &lt;a href="#" class="btn btn-default" role="button"&gt;Button&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;`,
      props: ['album'],
      data: function () {
          return {
              x:this.album
          }
      }
  });
  
  
  // register
  Vue.component('youtube-album-list-component', {
      template: `&lt;div class="row"&gt;
                      &lt;album-component v-for="album in albumList" :album="album"&gt; &lt;/album-component&gt;         
              &lt;/div&gt;`
      ,
      props: ['albums'],
      data: function () {
          return {
              albumList: this.albums
          }
      }
  })
  </code></pre>
  
  <p>And the index.html</p>
  
  <pre><code> &lt;div id="app"&gt;
        &lt;div&gt;
          &lt;div class="input-group input-group-med"&gt;
            &lt;span class="input-group-addon"&gt;Album&lt;/span&gt;
            &lt;input v-model="album" class="form-control" placeholder="Title"&gt;
          &lt;/div&gt;&lt;br&gt;
          &lt;div class="input-group input-group-med"&gt;
            &lt;span class="input-group-addon"&gt;Artist&lt;/span&gt;
            &lt;input type="text" class="form-control" placeholder="Name" v-model="artist"&gt;
          &lt;/div&gt;&lt;br&gt;
          &lt;div class="input-group input-group-med"&gt;
            &lt;span class="input-group-addon"&gt;Link&lt;/span&gt;
            &lt;input type="text" class="form-control" placeholder="Link" v-model="link"&gt;
          &lt;/div&gt;&lt;br&gt;
  
          &lt;div v-cloak class="input-group input-group-med"&gt;
            &lt;select v-model="genre"&gt;
            &lt;option v-for="genre in genres" v-bind:values="genre"&gt;{{genre}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="input-group input-group-med"&gt;
            &lt;span class="input-group-addon"&gt;Rating&lt;/span&gt;
            &lt;input type="text" class="form-control" placeholder="Rating" v-model="rating"&gt;
          &lt;/div&gt;&lt;br&gt;
        &lt;/div&gt;
        &lt;button v-on:click="addAlbum" type="button" class="btn btn-danger btn-lg"&gt;Left&lt;/button&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div&gt;
          &lt;div class="page-header result-header"&gt;
            &lt;h1&gt;Album list&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;youtube-album-list-component :albums="albumList"&gt;&lt;/youtube-album-list-component&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to pass the computed albumList in to my youtube-album-list-component as prop. Then using that list to create album-components. I'm trying to figure out why although the info variable has an Array that is being returned, it's not being rendered. Any ideas?</p>