JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app">
  <h2>Images:</h2>
  <div class="row m-2">
    <div v-for="(data, index) in rawData" class="image-input image-input-active d-flex">
      <div class="image-preview">
         <img class="img-responsive h-100" :src="data">
        <button class="btn btn-xs remove-file" @click="removeFile(index)">
          <i class="fa fa-trash " ></i>
        </button>
      </div>
       <input type="radio" name="imgType">
  </div>
 
  <div class="image-input image-input-tbd d-flex" v-if="this.files.length < this.option.maxFileCount">
    <div class="image-preview dropzone d-flex justify-content-center align-items-center" @drop="loaddropfile" @click="openinput">
      <i class="fa fa-plus text-success"></i>
    </div>
    <input type="file" class="d-none" id="vue-file-upload-input" @change="addImage">
  </div>
  </div>
  <div class="row justify-content-center m-2">
    <button class="btn btn-primary" @click="upload">Upload</button>
  </div>
  

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.image-input {
  padding: 3px;
}

.image-preview {
  width: 96px;
  height: 96px;
  cursor: pointer;
  overflow: hidden;
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
.dropzone {
  width: 96px;
  height: 96px;
}
.dropzone {
  border: 1px dashed green;
  border-radius: 7%;
}
.remove-file {
  position: absolute;
  margin-top: 5px;
  margin-left: -30px;
  color: rgba(0,0,0,0.5);
  padding: 1px 6px;
  background-color: rgba(0,0,0,0.3);
  
}
.remove-file:hover {
  color: #555;
  background-color: #f4f5f7;
}

Vue

new Vue({
  el: "#app",
  data() {
  	return {
      option: {
        maxFileCount: 3
      },
      files:[],
      rawData: [],
    }
  },
  methods: {
    loaddropfile: function(e) {
    	e.preventDefault()
      e.stopPropagation()
    	alert('ok')
    	console.log(e)
    },
  	openinput: function() {
    	document.getElementById("vue-file-upload-input").click();
    },
    addImage: function(e) {
    	const tmpFiles = e.target.files
      if (tmpFiles.length === 0) {
      	return false;
      }
      const file = tmpFiles[0]
      this.files.push(file)
      const self = this
    	const reader = new FileReader()
      reader.onload = function(e) {
      	self.rawData.push(e.target.result)
      }
      reader.readAsDataURL(file)
    },
    removeFile: function(index) {
    	this.files.splice(index, 1)
      this.rawData.splice(index, 1)
      document.getElementById("vue-file-upload-input").value = null
    },
    upload: function() {
    	alert('Check console to see uploads')
    	console.log(this.files)
    }
  },
  mounted(){

  }
})