vue.js小白，正在尝试做一个多图预览删除并上传的功能，已经实现了单图上传预览，删除还遇到些问题，希望大牛们指点迷津，附上html,vue.js的代码。
主要问题：选择多图预览时只显示单图，删除单图时不知道如何获取图片的索引，尝试用过v-for，但是在<div class="col-sm-10">中加上v-for="(key,image) in images"图片预览就不成功
html:

            <div class="form-group">
                <div class="col-sm-2 control-label">图片预览</div>
                <div class="col-sm-10">
                    <img src="image" id="pic" style="height: 267px; width: 267px;"/>
                    <a href="#"
                            style="position: absolute;" @click='delImage(key)'> 
                            <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    <button @click="removeImage">移除全部图片</button>
                    <button @click='uploadImage'>上传</button>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2 control-label">图片上传</div>
                <div class="col-sm-10">
                <input type="file" id="uploadFile" name="uploadFile" @change="onFileChange" multiple="multiple" class="form-control" >
                </div>
            </div>

vue.js：

    onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
        return; 
        this.createImage(files);
    },
    createImage(file) {
        var image = new Image();         
        var vm = this;
        var leng=file.length;
        for(var i=0;i<leng;i++){
            var reader = new FileReader();
            var uploadFile  = document.getElementById("uploadFile").files[0];
            reader.readAsDataURL(uploadFile);
            reader.onload =function(e){
                  $("#pic").attr("src", e.target.result);
            };                 
        }
    },
    delImage:function(index){
        this.images.shift(index);
        
    },
    removeImage: function(e) {

// this.images = [];

        $("#pic").remove();
    },