JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue-icons.js"></script>
<div id="app">
  <b-form-file
    v-model="files"
    multiple plain
    v-on:input="onChange">
  </b-form-file>
  <div>
    <ul>
      <li v-for="thisFile in filesAccumulated">
      {{ thisFile.name }}
      </li>
    </ul>
  </div>
  <b-button v-on:click="onReset">
    Reset
  </b-button>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        files: [],
        filesAccumulated: []
      }
    },
    methods: {
      onChange(event) {
        this.files.forEach(thisFile => {
          this.filesAccumulated.push(thisFile)
        })       
      },
      onReset() {
      	this.filesAccumulated = []
      }
    }
  })
}