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>
        <div class="large-2 columns">
            {!! Form::select('status', getUnitStatus(),null, ['class'=>'form-control', 'placeholder'=>'All Status', 'v-model'=>'status', '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.name }}</td>
                <td>@{{ unit.name }}</td>
                <td>@{{ unit.floor.name }}</td>
                <td>@{{ unit.unit_type.name }}</td>
                <td>@{{ unit.status}}</td>
                <td v-if="unit.status==0"><a :href="'/admin/dashboard/reservation/reserve/unit/' + unit.id" class="button...

JavaScript

new Vue({
    el: '#filterUnits',
    data: {
        units: this.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};

            this.$http.post('/admin/dashboard/reservation/units', input).then(function (response) {
                this.units = response.data;
            }, function (response) {
                console.log(response)
            });
        }
    }
});