SOURCE

var app = new Vue({
  el: '#app',
  data() {
    return {
      list: [
          {id:1, name: 'aa1'},
          {id:2, name: 'aa2'},
          {id:3, name: 'aa3'},
          {id:4, name: 'aa4'}
          ],
    }
  }, 
  methods: {

  }
});

<div id="app">
    <li v-for = '(item,index) in list' :key='item.id'>
         <div class="drop" :data-one="list[index].name" :data-two="222"></div>
    </li>
</div>

*,
*:before,
*:after {
    box-sizing: border-box;
}

.drop {
	position: relative;
	margin: 0 auto;
	width: 15em; 
	height: 15em;
	overflow: hidden;
}

.drop:before {
	content:attr(data-one);
	display:block;
	position:absolute;
}
.drop:after {
	content:attr(data-two);
	display:block;
	position:absolute;
}

.drop:before {
	background: rgba(167, 217, 234, 1);
    left: 0%;  
    top: 40%;      
	animation: one 4s linear infinite  ;
}

/* Surface */

.drop:after {
	background: rgb(52, 152, 219);
	left: 0; 
	top: 40%;
	animation: two 4s linear infinite;
}

/* Drop animation */

@keyframes one  {

	/* Drop form */

0% {
  top:40%;
  opacity:1;
 }
 
 50% {
  top:20%;
  opacity:0;
 }
 98%{
  opacity:0;
 }
  100% {
  opacity:1;
 }
}

/* Animation of water surface */

@keyframes two  {
   0% {
  opacity:0;
 }
  48% {
  opacity:0;
 }
 50% {
  top:40%;
  opacity:1;
 }
  100% {
  top:20%;
  opacity:0;
 }

}