How to render component data after page load on click

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.

lap @

                                                                           <div class="user-data">                                                                                   <span class="name block capitalize-font">@</span>                                                                                    <span class="time block" style="width:400px;">                                                                                    Status:- <span class="txt-primary">@ </span>                                                                                    Rank:- <span class="txt-primary">@</span>                                                                                    Time Taken:- <span class="txt-primary">@</span>                                                                                    <br/>                                                                                    Result:- <span class="txt-primary">@</span>                                                                                    Total Marks:- <span class="txt-primary">@</span>                                                                                    Obtained Marks:- <span class="txt-primary">@</span>                                                                                    </span>                                                                                                                                                               <div :class="student.status"></div>                                                                                <div class="clearfix"></div>                                                                            </div>

I only want to render data in front end..

via Chebli Mohamed