Error in upload-image component of VUE JS 2

I am trying to upload an image through the following HTML code:

<div id="vue-components">
     <upload-image></upload-image>
</div>

But there is no way, I also have this code in the script part and the css:

SCRIPT

var uploadImage = Vue.component('upload-image', {

    template: '
    <div>
        <div class="file-upload-form">
            Upload an image file:
            <input type="file" @change="onFileChange" accept="image/*">
            <!-- <div>
                <img :src="image">
            </div> -->
        </div>

    </div>
',  data:{
        image: ''
    },
    methods: {
        onFileChange(e){
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;

            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
            return console.log("hola" + image  );
        },
        removeImage: function (e) {
            this.image = '';
        }
    }
});


    new Vue({
    el: '#vue-components',
    components: {
        'upload-image': uploadImage,
    },
});

CSS

<style>
#app {
    text-align: center;
}
img {
    width: 30%;
    margin: auto;
    display: block;
    margin-bottom: 10px;
}
button {

}

The fact is that I charge the image, but at the time of selecting it and accepting it, I get the following error continuously:

image is not defined

And I can not move forward, of course. I think I'm getting involved with the idea of using the component's template and then passing it to the VUE instance.

Well, I would appreciate any help. Greetings