JSFiddle - React, Tailwind, and code Playground

HTML

@section('content')
    <h4>Reservations
        <a href="/admin/dashboard/blocks" class="button pull-right">Blocks</a>
    </h4>
    <br>

    <div class="row" id="filterUnits">
        {!! Form::open() !!}

        <div class="large-3 columns">
            {!! Form::select('block', getBlocks($site->slug),null,['class'=>'form-control', 'placeholder'=>'All blocks', 'v-model'=>'block', 'v-on:change'=>'getUnits()']) !!}
        </div>
        <div class="large-2 columns">
            {!! Form::text('name', null,['class'=>'form-control', 'placeHolder'=>'Enter unit name']) !!}
        </div>
        <div class="large-2 columns">
            {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
        </div>
        <div class="large-3 columns">
            {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
        </div>


        {!! Form::close() !!}

        <table>
            <thead>
            <tr>
                <td>Block</td>
                <td>Name</td>
                <td>Floor</td>
                <td>Unit Type</td>
                <td>Status</td>
                <td>Action</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="unit in units">
                <td>@{{ unit.block }}</td>
                <td>@{{ unit.name }}</td>
                <td>@{{ unit.floor }}</td>
                <td>@{{ unit.unit_type }}</td>
                <td>@{{ unit.status}}</td>
                <td v-if="unit.status==0"><a :href="'/admin/dashboard/reservation/reserve/unit/' + unit.id" class="button success">Reserve</a></td>
                <td v-else><a :href="'/admin/dashboard/reservation/'+ unit.id + '/cancel' " class="button alert">Cancel</a></td>
            </tr>
            </tbody>
        </table>
    </div>

@endsection

JavaScript

new Vue({
    el: '#filterUnits',
    data: {
        units: [],
        block: '',
        floor: '',
        unit_type: '',
        status: ''
    },
    methods: {
        // Function to filter units
        getUnits: function () {
            var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};
            var that = this  
            setTimeout(function () {
                that.units = [{name: "A", status: "done", unit_type: "As", floor: "1", block: 1 }];
            }, 100);
        }
    },
    beforeMount(){
    	this.getUnits()
    }
});