JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainapp">
    <table>
      <thead>
        <th>Name</th><th>Status</th>
      </thead>
      <tbody>
        <tr v-for="user in users">
          <td>{{user.name}}</td>
          <td><combobox v-bind:default="user.status" v-bind:data="status_codes" v-on:item_change="status_change($event, user)"></combobox></td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

.combobox{
    display: inline-block;
    min-width: 120px;
    position: relative;
    padding:0;
    border:1px solid #ccc;
}
.combobox .symbol{
    cursor: pointer;
    position: absolute;
    top:0;
    right:0;
    height: 100%;
    padding:0 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.combobox .main{
    cursor: pointer;
    display: block;
    padding:8px 10px;
    min-height: 30px;
    box-sizing: border-box;
}
.combobox .combodata{
    top:100%;
    left:0;
    position: absolute;
    list-style: none;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    margin:0;
    padding: 0;
    z-index: 2000;
    box-shadow:1px 1px 3px rgba(0, 0, 0, 0.8);
}
.combobox .combodata .item{
    display: block;
    padding:10px 20px;
    background: #bbb;    
    min-width: 120px;
    box-sizing: border-box;
}
.combobox .combodata .item:hover{
    background: #42b983;
}

JavaScript

var combobox = Vue.component('combobox', {
      data: function () {
        return {
          selected_item:{title:'Select', value:-1},
          visible:false
        }
      },
      props:['data','default','symbol'],
      template: `
        <div class="combobox">
          <span class="symbol" v-if="!symbol">
            <i class="fa fa-chevron-down" aria-hidden="true"  ></i>
          </span>
          <span class="main" v-on:click="toggleVisible">{{selected_item.title}}</span>
          <ul class="combodata" v-if="visible">
            <li class="item" v-for="item in data" v-on:click="select(item)">{{item.title}}</li>
          </ul>
        </div>
      `,
      created:function(){
        if(this.data.length>0){
          if(this.default == null || this.default == undefined || this.default =='') this.default=0;
          this.selected_item = this.data[this.default];
        }
      },
      methods:{
        toggleVisible:function(){
          this.visible = !this.visible;
        },
        select:function(item){
          if(this.selected_item != item){
            this.selected_item= item;
            this.$emit('item_change', item);
          }
          this.visible = false;
        }
      }
    });

    var app=new Vue({
      el:"#mainapp",
      data:{
         status_codes:[{title:'Inactive', value:0},{title:'Active', value:1}],
         users:[{name:'Andrew', status:1},{name:'Jackson', status:0},{name:'Tom', status:1}]
      },
      methods:{
         status_change:function(item, user){
            console.log(item, user);
            try{
               user.status=item.value;
            }catch(e){console.log(e);}
         }
      }
    });