<div id="app" class="text-black antialiased flex h-screen">
  <!-- List 1 -->
  <div class="w-1/2 py-6 border-r">
    <div class="text-3xl font-bold px-6 mb-2">List 1</div>
    <div v-for="(item, i) in listOne"
         class="flex items-center px-6 py-2 hover:bg-gray-100 cursor-pointer"
         @click="fromLeftToRight(i)">
      <div class="flex-1">{{item}}</div>
      <div class="ion-md-arrow-forward text-teal-500"></div>
    </div>
  </div>
  <!-- List 2 -->
  <div class="w-1/2 py-6">
    <div class="text-3xl font-bold px-6 mb-2">List 2</div>
    <div v-for="(item, i) in listTwo"
         class="flex items-center px-6 py-2 hover:bg-gray-100 cursor-pointer"
         @click="fromRightToLeft(i)">
      <div class="ion-md-arrow-back mr-4 text-teal-500"></div>
      <div class="flex-1">{{item}}</div>
    </div>
  </div>
</div>
input, textarea, button:focus {
  outline: none;
}

input::placeholder {
  color: #cbd5e0;
  opacity: 1;
}
var app = new Vue({
  el: '#app',
  data: {
    listOne: [
      'Lorem ipsum',
      'Dolor sit amet',
      'Consectetur adipiscing',
      'Vestibulum venenatis',
      'Lectus ut ipsum',
    ],
    listTwo: []
  },
  methods: {
    fromLeftToRight (index) {
      this.listTwo.push(this.listOne[index])
      this.listOne.splice(index, 1)
    },
    fromRightToLeft (index) {
      this.listOne.push(this.listTwo[index])
      this.listTwo.splice(index, 1)
    }
  }
})

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss@next/dist/tailwind.min.css
  2. https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js