title: “Cannot read property 'ajax of undefined”
body: <p>I want to refresh the table after click search and this is happen, 
  here is the table</p>
  
  <pre><code>methods: {
    init: function() {
      appTable = $('#tblApproval').DataTable({
        ajax : {
          url: '{{ Route("api_travel_app_list") }}',
          dataType: 'json',
          type: 'GET',
          cache: false,
          data: function(d) {
            d.period = appSearch.period;
            d.status = appSearch.status;
          },
          beforeSend: function(jqXHR, settings) {
            doLoading(true);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log("Text Status: " + textStatus + ", Error: " + errorThrown);
            swal(textStatus, errorThrown, "error");
          },
          complete: function(jqXHR, textStatus)  {
            doLoading(false);
          }
        },
        columns: [
          {
            data: null,
            render: function (data, type, row, meta) {
              return meta.row + meta.settings._iDisplayStart + 1;
            }
          },
  </code></pre>
  
  <p>and here is the error code</p>
  
  <pre><code>open: function() {
      $("#modalSearch").modal("show");
      this.fetchComboBoxData();
    },
    search: function() {
      if(appSearch.nik == ""){
        swal({
          imageUrl: "{{ asset('asset/img/icon/png/malware.png') }}",
          imageHeight: 110,
          text: 'NIK should not be empty',
          showCloseButton: true
        });
        return;
      }
  
      appTable.ajax.reload();
      $("#modalSearch").modal("toggle");
  </code></pre>
  
  <p>In this code I get Uncaught TypeError: Cannot read property 'ajax' of undefined.</p>