Vue-for не отрисовывает объекты в html

Здравствуйте, я хочу создать живую таблицу поиска в моем django приложении, используя vuejs cdn. На стороне POST все работает, так как он получает мои ответы API, но когда дело доходит до рендеринга в vue-for кажется, что он не рендерится и я получаю только заголовок таблицы, но фактическое тело таблицы не появляется на html странице

Вот мой html файл приборной панели:

 <div id="app"class=" col-md-12 col-sm-12 py-3 px-4">
        <!--Text search-->
        <div class="input-group">
            <input @keyup="send_namerequest" v-model="search_query" type="text" class="form-control form-control-lg" placeholder="Search Bogus Client"
                aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
            </div>
            <div id="eraser" class="input-group-append" @click="remove_search">
                <span class="input-group-text" id="basic-addon2"><i class="fas fa-eraser"></i></span>
            </div>
{%include "components/table.html"%}
        </div>

table.html

<table v-show="true"id="recent" class="table p-0 w-0 table-lg table-responsive-sm table-striped table-bordered">
    <tbody >
            <tr v-for="client in resultsobj" :key="client.name"> 
                        <td ><#client.name#></td>
                        <td><#client.project.project_name#></td>
                        <td><#client.reason.reason_name#></td>
             </tr>
    </tbody>
</table>

app.js

var dash = new Vue({
    el: '#app',
    delimiters: ["<#", "#>"],
    data: {
        haveresults: false,
        search_query: '',
        resultsobj: [],
    },
    computed :{},
    ready: function(){},

    methods: {
        //  methods function
        remove_search : function(){
           
            this.search_query = "";
            this.haveresults = false;
        },

        async send_namerequest(){
            const res = await axios.post('/api/search/',{
                client_name : this.search_query,
            })
            .then(function(response){
                this.haveresults = true;
                this.resultsobj = (response.data);
                console.log(resultsobj)
            })
        }
        
        //end
    },
 
});

Update : После биения головой о стену, я наконец понял, что нужно изменить this на app, так как это главный инициатор new vue({})

Отсюда :

 remove_search : function(){
           
            this.search_query = "";
            this.haveresults = false;
        },
        async send_namerequest(){
            const res = await axios.post('/api/search/',{
                client_name : this.search_query,
            })
            .then(function(response){
                this.haveresults = true;
                this.resultsobj = (response.data);
                console.log(resultsobj)
            })
        }
    },

В этом

 remove_search : function(){
           
            app.search_query = "";
            app.haveresults = false;
        },
        send_namerequest : function(){
            axios.post('/api/search/',{
                client_name : app.search_query,
            })
            .then(function(response){
                app.haveresults = true;
                app.resultsobj = response.data;
            })
        }
    },
Вернуться на верх