How to render component data after page load on click - vue.js

Question

I am using vue js with laravel. I want to reload my data according to date on click.
My data from api is get according to date but in front it is not change
Here is under my app.js code
var socket = new Vue({
el: "#enrollment-app",
components: {
barChart
},
data: {
privateChannleData: null,
exam_type: null,
exam_id: null,
response_exam_data: [],
response_lap_data: [],
response_btn_list: [],
student_list: [],
lineChartData: {
lables: [],
options: [],
dataset: []
}
},
created() {
if (document.getElementById("exam_type"))
this.exam_type = document.getElementById("exam_type").value;
if (document.getElementById("exam_id"))
this.exam_id = document.getElementById("exam_id").value;
if (this.exam_type != null && this.exam_id != null)
this.getEnrollmentStatus();
},
methods: {
getEnrollmentStatus: function(date="null") {
var self = this;
var data_set = [];
var params = {
exam_type: document.getElementById("exam_type").value,
exam_id: document.getElementById("exam_id").value,
date:date,
};
console.log(params);
axios
.post("/api/get_enrollment_data", params)
.then(function(response) {
self.response_exam_data = response.data.data;
//console.log(self.response_exam_data.students[0]);
self.response_exam_data.students[0].forEach(function(ii, vv) {
self.student_list.push(ii);
});
self.response_btn_list=self.response_exam_data.articles[0];
self.lineChartData.dataset = {
labels: [
"Total Enrollment",
"Not Submitted",
"Submitted",
"Total Pass",
"Total Fail"
],
datasets: [
{
label: "Enrollment Data",
backgroundColor: "#f87979",
data: [
parseInt(self.response_exam_data.total_enrollment),
parseInt(self.response_exam_data.not_submitted),
parseInt(self.response_exam_data.submitted_count),
parseInt(self.response_exam_data.total_pass),
parseInt(self.response_exam_data.total_fail)
]
}
]
};
self.lineChartData.options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
},
responsive: true,
maintainAspectRatio: true
};
})
.catch(function(error) {
alert("Error. Try again after sometime.");
});
}
},
});
Here is under my html code.
<div id="enrollment-app">
<button v-for="(button, key) in response_btn_list" type="button" v-on:click="getEnrollmentStatus({{ button }})" class="btn btn-success btn-icon left-icon mr-10" :date="button">lap #{{ key+1 }} </button>
<div class="user-data">
<span class="name block capitalize-font">#{{student.name}}</span>
<span class="time block" style="width:400px;"> Status:- <span class="txt-primary">#{{student.status_text}} </span> Rank:- <span class="txt-primary">#{{student.My_rank}}</span> Time Taken:- <span class="txt-primary">#{{student.timeTaken}}</span><br/>
Result:- <span class="txt-primary">#{{student.final_result}}</span>
Total Marks:- <span class="txt-primary">#{{student.total_marks}}</span>
Obtained Marks:- <span class="txt-primary">#{{student.obtained_marks}}</span>
</span>
<div :class="student.status"></div>
<div class="clearfix"></div>
</div>
</div>
My resultant data on page load
image on laad data
My resultant data after click on button
data after click button
I only want to render data in front end..