title: V-for on rendering multiple elements
body: <p>Just trying to pick up Vue.js so please be gentle :smiley:</p>
  
  <p>The issue I’m facing is that when i’m binding elements separately on two different columns it everything works, but it messes up my layout. All images load on first row and articles are rendered below.</p>
  
  <pre><code>the code =&gt;
  
  ```&lt;div class="row no-gutters"&gt; &lt;!-- remove horizontal paddings between columns 4 this row --&gt;
  
      &lt;div class="col-md-2"  v-for="(post, img) in posts"&gt;
        &lt;div class="article-image"&gt;
          &lt;img  :src="post.img" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="col-md-6" v-for="(post, title) in posts" v-bind="post.id"&gt;
        &lt;div class="article"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;{{ post.title }}&lt;/h3&gt;
              &lt;h6 class="card-subtitle text-muted"&gt;21st Dec 17&lt;/h6&gt;
              &lt;p class="card-text"&gt;{{ post.content }}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;```
  </code></pre>
  
  <p>So, I decided to put the v-for on the row class instead and have it loop through image and article one after another, rather than loading all images first and then all the articles.</p>
  
  <pre><code>the code =&gt;
  
  ```&lt;div class="row no-gutters" v-for="(post, img, title) in posts" v-bind="post.id"&gt;
      &lt;div class="col-md-2" v-for="(post, img) in posts"&gt;
        &lt;div class="article-image"&gt;
          &lt;img  :src="post.img"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6" &gt;
        &lt;div class="article"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;{{ post.title }}&lt;/h3&gt;
              &lt;h6 class="card-subtitle text-muted"&gt;21st Dec 17&lt;/h6&gt;
              &lt;p class="card-text"&gt;{{ post.content }}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;```
  </code></pre>
  
  <p>I’m not sure if I’m failing at declaring it properly, but I’m getting the following error =></p>
  
  <p><img src="https://i.stack.imgur.com/AMVYx.png" /><br/><sub>(source: <a href="https://forum.vuejs.org/uploads/default/optimized/2X/8/8660a001b60f804be33b1d8475e79de102329118_1_689x367.png" rel="nofollow noreferrer">vuejs.org</a>)</sub><br/></p>
  
  <p>Any help would be much appreciated.</p>