Vue.js making object.length value reactive

I don't know the implementation of the searchStudentsList method, but you could try using the filteredStudents as a computed property, or making a watch property on the searchTerm in order to make the search again:

Using computed:

<template>
        <div class="d-inline-flex flex-row p-4 col-2">
          Total record(s): {{ recordCount }}
        </div>

    <table class="table border table-striped table-hover">
        <thead class="bg-secondary">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="student in filteredStudents" :key="student._id">
                <td>{{ student.firstName }}</td>
                <td>{{ student.lastName }}</td>
                <td>{{ student.email }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import MixinCommon from '@/mixins/common.js'

    export default {
        data() {
            return {
                searchTerm: '',
                Students: [],
                studentcount: 0
            }
        },
        created() {
            this.Students = this.getSutdentList()
        },
        computed: {
            recordCount() {
                return this.Students.length
            },
            filteredStudents() {
                return this.searchStudentList(this.searchTerm.toUpperCase(), this.Students)
            },
        },
        mixins: [MixinCommon],
    }
</script>

Using watch property:

<template>
        <div class="d-inline-flex flex-row p-4 col-2">
          Total record(s): {{ recordCount }}
        </div>

    <table class="table border table-striped table-hover">
        <thead class="bg-secondary">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="student in filteredStudents" :key="student._id">
                <td>{{ student.firstName }}</td>
                <td>{{ student.lastName }}</td>
                <td>{{ student.email }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import MixinCommon from '@/mixins/common.js'

    export default {
        data() {
            return {
                searchTerm: '',
                Students: [],
                filteredStudents: [],
                studentcount: 0
            }
        },
        created() {
            this.Students = this.getSutdentList()
            this.filteredStudents = this.searchStudentList(this.searchTerm.toUpperCase(), this.Students)
        },
        computed: {
            recordCount() {
                return this.Students.length
            }
        },
        watch: {
          searchTerm(newValue) {
            this.filteredStudents = this.searchStudentList(newValue.toUpperCase(), this.Students)
          }
        }
        mixins: [MixinCommon],
    }
</script>