AdminController.php

<?php 

public function coursesJson () {
    if(request()->ajax()) {
        $vueTables = new EloquentVueTables;
        /*************************************OBTENEMOS LA FK Y LA RELACIÓN*************************************/
        $data = $vueTables->get(new Course, ['courses.id', 'name', 'status', 'teacher_id'], ['teacher']);
        return response()->json($data);
    }
    return abort(401);
}

Courses.vue

<template>
    <div>
        <div class="alert alert-primary text-center" v-if="processing">
            <i class="fa fa-compass"></i> Procesando petición...
        </div>
        <v-server-table ref="table" :columns="columns" :url="url" :options="options">

            <!-- AÑADIMOS EL SLOT TEACHER PARA VER EL PROFESOR DEL CURSO -->
            <div slot="teacher" slot-scope="props">
                <p>{{ props.row.teacher.title }}</p>
            </div>

            <div slot="activate_deactivate" slot-scope="props">

                <button
                    v-if="parseInt(props.row.status) === 1"
                    type="button"
                    class="btn btn-danger btn-block"
                    @click="updateStatus(props.row, 3)"
                >
                    <i class="fa fa-ban"></i> {{ labels.reject }}
                </button>

                <button
                    v-else
                    type="button"
                    class="btn btn-success btn-block"
                    @click="updateStatus(props.row, 1)"
                >
                    <i class="fa fa-rocket"></i> {{ labels.approve }}
                </button>
            </div>

            <div slot="status" slot-scope="props">
                {{ formattedStatus(props.row.status) }}
            </div>

            <div slot="filter__status" @change="filterByStatus">
                <select class="form-control" v-model="status">
                    <option selected value="0">Selecciona una opción</option>
                    <option value="1">Publicado</option>
                    <option value="2">Pendiente</option>
                    <option value="3">Rechazado</option>
                </select>
            </div>

        </v-server-table>
    </div>
</template>

<script>
    import {Event} from 'vue-tables-2';
    export default {
        name: "courses",
        props: {
            labels: {
                type: Object,
                required: true
            },
            route: {
                type: String,
                required: true
            }
        },
        data () {
            return {
                processing: false,
                status: null,
                url: this.route,
                /*********************AÑADIMOS TEACHER A LAS COLUMNAS*********************/
                columns: ['id', 'teacher', 'name', 'status', 'activate_deactivate'],
                options: {
                    filterByColumn: true,
                    perPage: 10,
                    perPageValues: [10, 25, 50, 100, 500],
                    /*********************AÑADIMOS TEACHER A LAS CABECERAS*********************/
                    headings: {
                        id: 'ID',
                        teacher: this.labels.teacher,
                        name: this.labels.name,
                        status: this.labels.status,
                        activate_deactivate: this.labels.activate_deactivate,
                        approve: this.labels.approve,
                        reject: this.labels.reject,
                    },
                    customFilters: ['status'],
                    /*********************AÑADIMOS TEACHER A LAS ORDENACIÓN*********************/
                    customFilters: ['status'],
                    sortable: ['id', 'teacher', 'name', 'status'],
                    filterable: ['name'],
                    requestFunction: function (data) {
                        return window.axios.get(this.url, {
                            params: data
                        })
                        .catch(function (e) {
                            this.dispatch('error', e);
                        }.bind(this));
                    }
                }
            }
        },
        methods: {
            filterByStatus () {
                parseInt(this.status) !== 0 ? Event.$emit('vue-tables.filter::status', this.status) : null;
            },
            formattedStatus (status) {
                const statuses = [
                    null,
                    'Publicado',
                    'Pendiente',
                    'Rechazado'
                ];
                return statuses[status];
            },
            updateStatus (row, newStatus) {
                this.processing = true;
                setTimeout(() => {
                    this.$http.post(
                        '/admin/courses/updateStatus',
                        {courseId: row.id, status: newStatus},
                        {
                            headers: {
                                'x-csrf-token': document.head.querySelector('meta[name=csrf-token]').content
                            }
                        }
                    )
                        .then(response => {
                            this.$refs.table.refresh();
                        })
                        .catch(error => {

                        })
                        .finally(() => {
                            this.processing = false;
                        });
                }, 1500);
            }
        }
    }
</script>

<style>
    .table-bordered>thead>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>tfoot>tr>td {
        text-align: center !important;
    }
</style>

EloquentVueTables.php

<?php

namespace App\VueTables;

Class EloquentVueTables implements VueTablesInterface {

	public function get( $model, Array $fields, Array $relations = []) {
		$byColumn  = request( 'byColumn' );
		$orderBy  = request( 'orderBy' );
		$limit     = request( 'limit' );
		$page      = request( 'page' );
		$ascending = request( 'ascending' );
		$query     = json_decode( request( 'query' ), true );
		$data      = $model->select( $fields )->with($relations);

		if(request('status')) {
			$data->where('status', request('status'));
		}

		if ( isset( $query ) && $query ) {
			$data = $byColumn == 1 ? $this->filterByColumn( $data, $query ) : $this->filter( $data, $query, $fields );
		}

		$count = $data->count();
		$data->limit( $limit )->skip( $limit * ( $page - 1 ) );
		if ( isset( $orderBy )) {
			$direction = $ascending == 1 ? "ASC" : "DESC";

      /********************ORDENAMOS POR LA RELACIÓN, TEACHER.TITLE EN ESTE CASO********************/
			if ($orderBy === 'teacher') {
                $data->join('teachers', 'courses.teacher_id', '=', 'teachers.id')->orderBy('teachers.title', $direction);
            } else {
                $data->orderBy( $orderBy, $direction );
            }
		}

		$results = $data->get()->toArray();

		return [
			'data'  => $results,
			'count' => $count
		];
	}

	protected function filterByColumn( $data, $query ) {
		foreach ( $query as $field => $query ) {
			if ( ! $query ) {
				continue;
			}
			if ( is_string( $query ) && $field !== "status" ) {
				$data->where( $field, 'LIKE', "%{$query}%" );
			}
		}

		return $data;
	}

	protected function filter( $data, $query, $fields ) {
		foreach ( $fields as $index => $field ) {
			$method = $index ? "orWhere" : "where";
			$data->{$method}( $field, 'LIKE', "%{$query}%" );
		}

		return $data;
	}
}