title: How to use datatables.js in Vue.js2 project?
body: <p>I want to create a reactive Datatable in my Laravel + Vue.js project. I'm using <code>datatables.js</code> library to show my data. When I make an API call to get the data from db API returns me an array, so I want to populate that array in the <code>datatable</code>. But it's working weird?</p>
  
  <p><strong>Here's API call:</strong></p>
  
  <pre><code>methods: {
      getUsers() {
          axios.get('/api/users')
              .then(response =&gt; {
                  if(response.status === 200) {
                      this.users = response.data.users;
                      console.log(this.users);
                  }
              })
              .catch(error =&gt; {
                  console.error(error);
              });
      }
  },
  mounted() {                
      $('#users-datatable-responsive').DataTable();
      this.getUsers();
  }
  </code></pre>
  
  <p><strong>This is how I populating the data in the <code>datatable</code></strong></p>
  
  <pre><code>&lt;tr v-for="user in users"&gt;
      &lt;td&gt;@{{ user.fullname }}&lt;/td&gt;
      &lt;td&gt;@{{ user.phone }}&lt;/td&gt;
      &lt;td&gt;@{{ user.email }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><strong>And here's the weird result:</strong>
  <a href="https://i.stack.imgur.com/dj4J9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dj4J9.png" alt="enter image description here"></a></p>
  
  <p>Searching and other features of a datatable aren't working. What's the workaround?</p>
  
  <p><strong>Edited:</strong></p>
  
  <pre><code>mounted() {               
      let table = $('#users-datatable-responsive').DataTable({
          language: this.dataTableOptions
      });
      this.getUsers();
      table.rows().invalidate().draw();
  }
  </code></pre>
  
  <p>This approach didn't work for me.</p>