<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<h1>Vue.js</h1>

<div id="contents">
  <device-template></device-template>
  <device-template></device-template>
  <device-template></device-template>
</div>

h1 {
  text-align:center;
}

#contents {
	margin: 0;
	padding: 0;
}

.device {
  margin: 0 auto;
	width: 200px;
	height: 350px;
  border: solid 1px;
  margin-bottom: 20px;
}

.img-box {
	width: 150px;
	height: 200px;
	margin: 0 auto;
	margin-top: 20px;
	margin-left: 25px;
	margin-right: 25px;
	background-color: gray;
}

.device p{
	text-align: center;
}
View Compiled 
const Devices = {
    template:
    '<div class="device" v-on:click="popups">' +
      '<div class="img-box">' +
      '</div>' +
        '<div class="info-box">' +
          '<p>Name : {{ name }}</p>' +
          '<p>price : {{ price }}</p>' +
          '<p>end : {{ end }}</p>' +
        '</div>' +
      '</div>',
    data: function() {
      return {
        name: "Big Campain",
        price: "$ -10",
        end: "2018/06/01"
      }
    },
    methods: {
      popups: function() {
        alert("name : " + this.name +
              "\nprice : " + this.price +
              "\nend : " + this.end)
      }
    }
}

new Vue({
  el: '#contents',
  components: {
    'device-template': Devices
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.