title: using Vue.js & DataTable(jquery plugin)
body: <p>i'm new in Vue.js and DataTable and i hope some of you have the experience with their integration.. 
  can somebody say for sure that its a good way to integrate Vue.js &amp; DataTable(jquery plugin)? it's works just fine but i want to be sure it's the right way...
  thanks :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var app = new Vue({
  
       el: '#root',
  
    data(){
        return{
                  employees: [
                      {
                          Name: 'Tiger Nixon',
                          Position: 'System Architect',
                          Office: 'tokyo',
                          Age: '61',
                          StartDate: '2011/04/25',
                          Salary: '$320,800',
                      },
                  ],
                  name: '',
                  position: '',
                  office: '',
                  age: '',
                  startDate: '',
                  salary: '',
                  dataTable: null
              }
    },
  
    methods: {
        addEmployee(){
       this.dataTable.row.add([
           this.name,
           this.position,
           this.office,
           this.age,
           this.startDate,
           this.salary,
       ]).draw(false);
        }
    },
  
    mounted(){
        this.dataTable = $('#data_table').DataTable({
  
        });
    }
  
  
   })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#root{
    text-align: center;
  }
  
  .btn{
    margin-bottom: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root" class="container"&gt;
   &lt;form class="form-inline"&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="name"&gt;Name:&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" v-model="name" class="form-control" id="name"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="position"&gt;Position&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" v-model="position" class="form-control" id="position"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="office"&gt;Office&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" v-model="office" class="form-control" id="office"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="age"&gt;Age&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" v-model="age" class="form-control" id="age"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="Start_date"&gt;Start Date&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" v-model="startDate" class="form-control" id="start_date"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="salary"&gt;Salary&lt;/label&gt;&lt;br&gt;
     &lt;input type="text" v-model="salary" class="form-control" id="salary"&gt;
    &lt;/div&gt;&lt;br&gt;&lt;br&gt;
    &lt;button type="button" @click="addEmployee" class="btn btn-primary"&gt;Submit&lt;/button&gt;
   &lt;/form&gt;
   &lt;table id="data_table" class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
     &lt;th&gt;Name&lt;/th&gt;
     &lt;th&gt;Position&lt;/th&gt;
     &lt;th&gt;Office&lt;/th&gt;
     &lt;th&gt;Age&lt;/th&gt;
     &lt;th&gt;Start Date&lt;/th&gt;
     &lt;th&gt;Salary&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr v-for="employee in employees"&gt;
     &lt;td&gt;{{ employee.Name }}&lt;/td&gt;
     &lt;td&gt;{{ employee.Position }}&lt;/td&gt;
     &lt;td&gt;{{ employee.Office }}&lt;/td&gt;
     &lt;td&gt;{{ employee.Age }}&lt;/td&gt;
     &lt;td&gt;{{ employee.StartDate }}&lt;/td&gt;
     &lt;td&gt;{{ employee.Salary }}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue@2.1.8/dist/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>