How to maintain Ember Data two-way binding when using DataTables?

I am working on a project using Ember and I have a table component. which is created in HTML/Handlebars and initialized as a DataTable using jquery.

When initialised as a Datatable, the table is no longer responsive to the refreshModel: true of the queryParams on the page and the two way binding of Ember Data is lost. This is important functionality for me so I wondered if there was a way to have the best of both worlds?

The jquery in the component.js is:

import Component from '@ember/component';

export default Component.extend({

  model: null,

  didInsertElement() {
    let table = $('#resultsTable').DataTable({
      dom: 'Bfrtip',
      paging: false,
      scrollY: 500
    });


  },

});

The table is correct on the initial render but changing one of my queryParams does not refresh the data. I tried to rerender as follows:

  didUpdateAttrs() {
    let table = $('#resultsTable').DataTable({
      destroy: true,
      dom: 'Bfrtip',
    });
  }

This works to some extent but produces some undesirable behavior such as the table updating but not updating the 'Showing x results' widgets or taking a long time to update. If do not destroy the table I receive an error like:

DataTables warning: table id={id} - Cannot reinitialise DataTable. 

Which is a limitation of the Datatables library described here

Thoughts welcome