<script id="my-list" type="text/x-template">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <div class="list-item" v-for="shape in shapes">
        <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
      </div>
    </div>
  </div>
</script>

<div id="app">
  <my-list></my-list>
</div>

body {
  background: linear-gradient(270deg, #0E6251, #28B463);
}
#app {
  display: flex;
}
.my-list {
  flex: 1 1 50%;
  font-family: Arial;
  color: white;
  $padding: 20px;
  $radius: 4px;
  margin: 20px;
  .title {
    background: #A93226;
    padding: $padding;
    font-weight: bold;
    font-size: 22px;
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
  }
  .list {
    background: #34495E;
    padding: $padding;
    font-size: 16px;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }
  .list-item:not(:last-child) {
    padding-bottom: $padding;
  }
}

Vue.component('my-list',{
    template: '#my-list',
    data () {
        return {
            title: 'Shapes',
            shapes: [
                {
                    name: 'Square',
                    sides: 4
                },
                {
                    name: 'Hexagon',
                    sides: 6
                },
                {
                    name: 'Triangle',
                    sides: 3
                }
            ]
        }
    }
})

let app = new Vue({
    el: '#app'
})