Ember datatables not able to redraw after changing data

I am using ember-datatables addon which is based on jquery Datatables. I have created one datatables as per their guidelines.

But I am chaning the data of table after some time and redrawing the table. Redrawing table do not delete previous data.

Here is Ember twiddle created by me. Also I am adding code below.

templates/application.hbs

<h1>Please find data table below</h1>


  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Position</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Position</th>
    </tr>
  </tfoot>
  <tbody>
    
        <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    
  </tbody>

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function() {
    Ember.run.later(this, function() {
      this.controller.set('data1', [{
        'name': 'John Smith 1',
        'salary': '$2000',
        'position': 'developer'
      }, {
        'name': 'Alex 1',
        'salary': '$2000',
        'position': 'developer'
      }, {
        'name': 'Leonardo 1',
        'salary': '$2000',
        'position': 'developer'
      }]);

      var api = new $.fn.dataTable.Api('#myTable');
      api.row.clear();

      api.draw();

    }, 5000);
  }
});

controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  data1: [{
    'name': 'John Smith',
    'salary': '$2000',
    'position': 'developer'
  }, {
    'name': 'Alex',
    'salary': '$2000',
    'position': 'developer'
  }, {
    'name': 'Leonardo',
    'salary': '$2000',
    'position': 'developer'
  }]
});