SOURCE

Vue.component('my-list', {
  template: '#my-list',
  props: ['title'] });


let app = new Vue({
  el: '#app',
  data() {
    return {
      shapes: [
      {
        name: 'Square',
        sides: 4 },

      {
        name: 'Hexagon',
        sides: 6 },

      {
        name: 'Triangle',
        sides: 3 }],


      colors: [
      {
        name: 'Yellow',
        hex: '#f4d03f' },

      {
        name: 'Green',
        hex: '#229954' },

      {
        name: 'Purple',
        hex: '#9b59b6' }] };



  } });

<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <slot></slot>
    </div>
  </div>
</script>

<div id="app">
  <my-list title="Shapes">
    <div class="list-item" v-for="shape in shapes">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </div>
  </my-list>
  
  <my-list title="Colors">
    <div class="list-item" v-for="color in colors">
      <div>
        <div class="swatch" :style="{background: color.hex}"></div>
        {{ color.name }}
      </div>
    </div>
  </my-list>
</div>

body {
  background: linear-gradient(270deg, #0E6251, #28B463);
}

#app {
  display: flex;
}

.my-list {
  flex: 1 1 50%;
  font-family: Arial;
  color: white;
  margin: 20px;
}
.my-list .title {
  background: #A93226;
  padding: 20px;
  font-weight: bold;
  font-size: 22px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.my-list .list {
  background: #34495E;
  padding: 20px;
  font-size: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.my-list .list-item:not(:last-child) {
  padding-bottom: 20px;
}

.swatch {
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 8px;
}