vue-for 不渲染对象 html

Question

Hello i want to create a live search table on my django app using the vuejs cdn. On the POST side is working since it receives my API responses but when in it comes to render in vue-for it seems doesn't render and I only get is the header of table but the actual table body haven't appear in html page

Here's my dashboard html file:

 <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
    },
 
});

Answer 1

Update : After banging my head on the wall, I finally figured out by changing the this into app since it is the main initiator of new vue({})

From this:

 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)
            })
        }
    },

Into this

 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;
            })
        }
    },