Vue/DataTable test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="bootstrap"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div id="app">
  <h2>Todos:</h2>

  <div v-on:click="wizardPageSelect(1);">BUTTON1</div>
  <div v-on:click="wizardPageSelect(2);">BUTTON2</div>

  <div v-show="isStep1Active">
    <table id='step1Table' class='table table-striped table-bordered compact' style="table-layout: fixed;word-wrap: break-word; width: 100%">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>

  <div v-show="isStep2Active">
    <table id='step2Table' class='table table-striped table-bordered compact' style="table-layout: fixed;word-wrap: break-word; width:100%">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>

  <div v-show="isStep3Active">
    <table id='step3Table' class='table table-striped table-bordered compact' style="table-layout: fixed;word-wrap: break-word;">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

var table1 = null;
var table2 = null;

new Vue({
  el: "#app",
  data: {
    wizardStepCount: 1
  },
  
  methods: {
    wizardPageSelect: function (wizardStepNumber) {
      this.wizardStepCount = wizardStepNumber;
      table1.columns.adjust().draw();
      table1.columns.adjust().draw();      
    }
  },
  computed: {

    isStep1Active: function () {
      return (this.wizardStepCount === 1);
    },

    isStep2Active: function () {
      return (this.wizardStepCount === 2);
    },

    isStep3Active: function () {
      return (this.wizardStepCount === 3);
    }
  }
  
});     
       
var dataSet1 = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ] ];
    
var dataSet2 = [    
    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
    [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ]
];

    table1 = $('#step1Table').DataTable( {
      'dom':'lfript',
      'order':[[1, 'asc']],
      'lengthMenu':[[5, 10, 25, -1], [5, 10, 25, "All"]],    
      'data': dataSet1,
      'columns': [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" },
        { title: "Extn." },
        { title: "Start date" },
        { title: "Salary" }
      ]
    } );

    table2 = $('#step2Table').DataTable( {
      'dom':'lfript',
      'order':[[1, 'asc']],
     ...