Vue

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="app">
  <ul>
    <li v-for="(item,i) in arr">
    
       <div class="p-2 overflow-hidden">
           
          <small class="text-gray">{{item.name}} </small>
          
              <button class="btn btn-danger btn-sm mr-1 float-right" @click="deleteFile(i)">
                   <i v-if="loading" class="fa fa-spinner fa-spin fa-fw"></i>
                  <i class="fa fa-trash-o"></i>
              </button>

      </div>

    </li>
  </ul>
</div>

Vue

new Vue({
  el: '#app',
  data: {
    arr: [
      {
        name: 'afaw',
        },
      {
        name: 'argeae',
      },
      {
        name: 'agsesf',
      }
    ],
    	loading: false,

  },
  methods: {
    deleteFile(index) {
    	this.loading = true;
    }
  }
});