Simple VueJS Multiple Image Upload

ImageUpload.vue

<template>
    <div>
        <ul class="el-upload-list el-upload-list--picture-card">
            <li
                v-for="image in images"
                tabindex="0"
                class="el-upload-list__item is-ready"
            >
                <div>
                    <img
                        :src="parseImage(image)"
                        alt=""
                        class="el-upload-list__item-thumbnail"
                    />
                </div>
            </li>
        </ul>
        <label for="image">
            <ul class="el-upload-list el-upload-list--picture-card"></ul>
            <div tabindex="0" class="el-upload el-upload--picture-card">
                <i class="fas fa-plus"></i>
                <input
                    id="image"
                    type="file"
                    accept="image/*"
                    class="el-upload__input"
                    @change="getImage"
                />
            </div>
        </label>
    </div>
</template>

<style scoped>
.el-upload-list--picture-card {
    margin: 0;
    display: inline;
    vertical-align: top;
}
.el-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
}

.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
}
.el-upload--picture-card:hover {
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
        0 2px 4px 0 rgba(232, 237, 250, 0.5);
}
.el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
}
.el-upload__input {
    display: none;
}
.el-upload--picture-card i {
    font-size: 28px;
    color: #8c939d;
}
</style>
<script>
export default {
    props: {
        name: {
            type: String,
            default: 'file[]'
        },
        limit: {
            type: Number,
            default: 5,
            required: false
        },
    },
    data() {
        return {
            images: []
        };
    },
    methods: {
        getImage(e) {
            if (this.images.length === this.limit) {
                return this.$toasted.global.form_error({
                    message: 'Maximum 5 images is allowed'
                });
            }

            const file = e.target.files[0];
            this.images.push(file);
            this.$emit('input', this.images);
        },
        parseImage(image) {
            return URL.createObjectURL(image);
        }
    }
};
</script>