title: Vuejs with arrays
body: <p>Im converting a JSON response to an array with the following: </p>
  
  <pre><code>        json_data = response.body.movies;
          var result = [];
          for(var i in json_data) result.push([i, json_data [i]]);
          self.movies = _.chunk(result, 3);
  </code></pre>
  
  <h1>Before I try to convert it, it's an object, looking like this:</h1>
  
  <p><a href="https://i.stack.imgur.com/xdZny.png" rel="nofollow"><img src="https://i.stack.imgur.com/xdZny.png" alt="enter image description here"></a></p>
  
  <h1>After converting:</h1>
  
  <p><a href="https://i.stack.imgur.com/c5Qab.png" rel="nofollow"><img src="https://i.stack.imgur.com/c5Qab.png" alt="enter image description here"></a></p>
  
  <p>I have to convert because lodash <a href="https://lodash.com/docs/4.16.4#chunk" rel="nofollow">chunk</a> method only works on arrays (?).</p>
  
  <p>So when running <code>_.chunk(JSONAPIREPSONSE,4)</code>, <code>self.movies</code> looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/3PMaU.png" rel="nofollow"><img src="https://i.stack.imgur.com/3PMaU.png" alt="enter image description here"></a></p>
  
  <p>So far too good.</p>
  
  <p>But when I'm trying to <code>v-for</code> <code>self.movies</code>, I cannot get the information i need. Im having this template</p>
  
  <pre><code>           &lt;div class="row" v-for="(movie, index) in movies" v-bind:index="index"&gt;
                  &lt;div class="col-sm-4" v-for="(set, key) in movie" v-bind:key="key"&gt;
                      &lt;div class="panel"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;a v-on:click.prevent="fetchNow(movie.movie_title)" :href="movie.movie_id"&gt;@{{ set.movie_title }}&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                          movie title: &lt;b&gt;@{{ set.movie_title }}&lt;/b&gt; &lt;br&gt;
                          set: &lt;b&gt;@{{ set }}&lt;/b&gt; &lt;br&gt;
                                //Here comes Content do whatever here
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And the result for <code>{{ set.movie_title }}</code> is empty, with no errors. </p>
  
  <p>The result for <code>{{ set }}</code> is:</p>
  
  <pre><code>[ "0", { "movie_title": "Bridget Jones's", "movie_id": "17523" } ] 
  [ "1", { "movie_title": "Strange", "movie_id": "17483" } ]
  </code></pre>
  
  <h1>The expected result</h1>
  
  <p>Normal vuejs syntax to display the content of the array.</p>