Hey guys, I have made a simple Datatable with search input,

Student.js

Vue.component('student-list',{
    props: ['students'],
    template:`
        
<div class="table-responsive">
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
    <tr>
        <th>10</th>
        <th>9</th>
        <th>8</th>
        <th>7</th>
        <th>6</th>
        <th>5</th>
        <th>4</th>
        <th>3</th>
        <th>2</th>
        <th>1</th>
    </tr>
</thead>
<tbody>
    <student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>
    `,
    computed: 
    {
        searchResults: function(student){
            var self = this;
            return this.students.filter(
                function(student){
                    if(this.searchQuery == '' || this.searchQuery == null) { return true; }
                    console.log(this.searchQuery);
                    return (student.toString().indexOf(this.searchQuery) != -1);
                }
                );
        }
    },

//  v-if="searchResults(student)"

});

Vue.component('student',{
    props: ['student'],
    template:`
        <tr>
            <td>
                {{ student.name }} {{ student.lname }}
            </td>
            <td>
                <a href="tel:{{ student.phone }}" title="התקשר" class="table-action-btn"><i class="md-phone"></i></a>
                <a href="tel:{{ student.momPhone }}" title="התקשר לאמא" class="table-action-btn"><i class="ion-woman"></i></a>
                <a href="tel:{{ student.dadPhone }}" title="התקשר לאבא" class="table-action-btn"><i class="ion-man"></i></a>
                <a href="/users/{{ student.id }}" title="ערוך" class="table-action-btn"><i class="ion-android-settings"></i></a>
            </td>
            <td>
                {{ student.address }}
            </td>  
            <td>
                {{ student.totalTopay }}
            </td>
            <td>
                {{ student.lessonsTaken }}
            </td>
            <td>
                {{ student.cancelCount }}
            </td>    
            <td>
                {{ student.phone }}
            </td>
            <td>
                {{ student.momPhone }}
            </td>
            <td>
                {{ student.dadPhone }}
            </td>
            <td>
                {{ student.email }}
            </td>
        </tr>
    `

});

new Vue({
    el: '#content-page',
    data: {
        'searchQuery': ''
    }
});

HTML

....
<div id="#content-page">
        <input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
....
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="{{ asset('js/students.js') }}"></script>
...

Now, for some reason whenever I leave the search blank it works as needed, but when I change the input field by typing in the text box, nothing changes, and when I call it (this.searchQuery) on the Dev Tools console, it says undefined. What am I missing? Thanks in advance everyone, best regards.