title: A way to render multiple root elements on VueJS with v-for directive
body: <p>Right now, I'm trying to make a website that shows recent news posts which is supplied my NodeJS API.</p>
  <p>I've tried the following:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div id=&quot;news&quot; class=&quot;media&quot; v-for=&quot;item in posts&quot;&gt;
      &lt;div&gt;
          &lt;h4 class=&quot;media-heading&quot;&gt;{{item.title}}&lt;/h4&gt;
          &lt;p&gt;{{item.msg}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>const news = new Vue({
      el: '#news',
      data:   {
          posts:  [
              {title: 'My First News post',   msg: 'This is your fist news!'},
              {title: 'Cakes are great food', msg: 'Yummy Yummy Yummy'},
              {title: 'How to learnVueJS',    msg: 'Start Learning!'},
          ]
      }
  })
  </code></pre>
  <p>Apparently, the above didn't work because Vue can't render multiple root elements.</p>
  <p>I've looked up the VueJS's official manual and couldn't come up with a solution.
  After googling a while, I've understood that it was impossible to render multiple root element, however, I yet to have been able to come up with a solution.</p>