If you have a button inside a form, it has a default type of submit. To prevent that from happening, you will have to set type=button as follows:

<button type=button v-show=imageSrc @click=removeImage>Remove image</button>

Reference: Can I make a <button> not submit a form?

Edit: Solution for the second problem mentioned in comments #1 to #5

Please modify your reader.onload function as follows:

reader.onload = function(e) {

    vm.imageSrc = e.target.result;

    console.log(Clearing file input);

    document.querySelectorAll('input[type=file]').forEach(element => {

        element.value = ;

    });

}

As you can see, I am printing out a console log for debugging (which you can remove), then proceeding to select all file inputs and resetting its value. This clears the selected file.

Note: This clearing function happens after the file is read into memory. If you want it on remove function, you can do as follows:

removeImage: function removeImage(e) {

    this.imageSrc = ;

    console.log(Clearing file input);

    document.querySelectorAll('input[type=file]').forEach(element => {

        element.value = ;

    });

}

The choice is yours, whether you want to clear the file name after reading into memory or if you want to keep it on screen. Let me know if it works!

Another note: If you have any other <input type=file> in your app, even that will get cleared. But I assume you would have read it into memory and kept it in some local variables. To avoid this, you need to modify the document.querySelectorAll function to target only the relevant input by giving it a class or id.