Actually using v-for with ref has a lot of issues in vue 2. Please follow this issue:

v-for, refs and access to refs. by array index after Array.unshift

As Evan You said, this problem solved in vue 3:

Note that v-for refs do not guarantee the same order as your source Array.

In the next release you can determine how to register refs yourself by passing a function to :ref.

I try to fix your code but I can't find a way. Maybe you have to work with DOM directly.

If I find an answer, I will update my answer soon.

You are hiding the 3rd one after slicing the array.

index before slice 0 1 2

index after slice 0 1

The 2 become 1 in the array. Just try to comment the last line

edit: And image is still binding to is index. So I just rewrite the code :

<template>
  <div id="app">
    <input id="file-upload" type="file" multiple @change="uploadImage" />
    <div v-for="(image, key) in productImages" :key="key">
      <div class="image-holder">
        <img v-bind:ref="'image'" alt="" src="" />
        <button type="button" @click="removeImage(image, key)">x</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      productImages: [],
    };
  },
  methods: {
    uploadImage(e) {
      let selectedFiles = e.target.files;
      for (let i = 0; i < selectedFiles.length; i++) {
        this.productImages.push(selectedFiles[i]);
      }
      this.applyImage();
    },

    removeImage(image, index) {
      console.log(this.productImages);
      this.productImages.splice(index, 1);
      this.applyImage();
      //this.$refs.image[index].src = "" // You are hidding the 3rd one that is now in index 1.
    },
    applyImage() {
      for (let i = 0; i < this.productImages.length; i++) {
        let reader = new FileReader();
        reader.onload = (e) => {
          this.$refs.image[i].src = reader.result;
        };
        reader.readAsDataURL(this.productImages[i]);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.image-holder {
  float: left;
}
</style>

Try to call method to render images:

new Vue({
  el: '#demo',
  data() {
    return {
      productImages: []
    }
  },
  methods: {
    uploadImage(e) {
      let selectedFiles = e.target.files;
      for (let i = 0; i < selectedFiles.length; i++) {
        this.productImages.push(selectedFiles[i]);
      }
      this.refreshImg()
    },
    refreshImg() {
      for (let i = 0; i < this.productImages.length; i++) {
        let reader = new FileReader();
        reader.onload = (e) => {
          this.$refs.image[i].src = reader.result;
        };
        reader.readAsDataURL(this.productImages[i]);
      }
    },
    removeImage(image, index) {
      this.productImages.splice(index, 1);
      this.refreshImg()
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<template>
  <input id="file-upload" type="file" multiple @change="uploadImage" />
  <div v-for="(image, key) in productImages" :key="key">
    <div class="image-holder">
      <img v-bind:ref="'image'" alt="" src="" style="width: 50px;" />
      <button type="button" @click="removeImage(image, key)"></button>
    </div>
  </div>
  </template>
</div>