Grid / List dynamic component

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>

<div id="app">
  <component :is="currentView" v-bind:products=products></component>
</div>

<template id="image-view-grid">
  <div class="image-view image-view-grid">
    <div v-for="product in products" class="item">
      <img :src="product.image" class="image-view-thumb">
      <p class="image-view-label">{{product.name}}</p>
    </div>
  </div>
</template>

<template id="image-view-list">
  <div class="image-view image-view-list">
    <ul>
      <li v-for="product in products" class="item">
        <img :src="product.image" class="image-view-thumb">
        <span>{{product.name}}</span>
      </li>
    </ul>
  </div>
</template>

SCSS

.image-view {}

.image-view-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .item {
    width: 30%;
    margin: 10px;
    .image-view-thumb {
      width: 100%;
    }
    .image-view-label {
      text-align: center;
    }
  }
}

.image-view-list {
  .item {
    margin: 10px;
    .image-view-thumb {
      width: 120px;
      vertical-align: middle;
    }
  }
}

JavaScript

var dummyProducts = []
var i = 0;
var itemCount = 30;

while (i++ < 30) {
  dummyProducts.push({
    image: faker.image.image(),
    name: faker.commerce.productName()
  })
}

Vue.component('image-view-grid', {
  template: '#image-view-grid',
  props: ['products']
})

Vue.component('image-view-list', {
  template: '#image-view-list',
  props: ['products']
})

new Vue({
  el: '#app',
  created: function() {
    this.products = dummyProducts
  },
  data: function() {
    return {
      currentView: 'image-view-grid',
      products: []
    }
  }
})