vue 2.4

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div id="app">
  <div
    class="image"
    @click="addImage">
    
    <p>+</p>
  </div>
  <div
    class="image"
    v-for="image in images" 
    :key="image.id">
    
    <img :src="image.url" />  
  </div>
</div>

CSS

.image {
  height: 100px;
  width: 100px;
  float: left;
  padding: 5px;
}

p {
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
  line-height: 100%; 
  margin-top: 0;
  line-height: 100px;
  font-size: 30px;
  cursor: pointer;
}

img {
  width: 100%
}

JavaScript

window.onload = function() {
	new Vue({
  	el:'#app',
		data: {
    	originalImages: [],
  		images: []
		},
    methods: {
    	addImage: function () {
        this.images = this.originalImages.slice(0, this.images.length + 1);
      }
    },
    created: function () {
    	var that = this;
    
    	axios
      	.get("https://jsonplaceholder.typicode.com/photos")
        .then(function (response) {
        	that.originalImages = response.data.slice(0, 100);
      		that.images = that.originalImages.slice(0, 10);
      	});
    }
  }
)};