Why is init running twice

[argonzalez2016]

I am using Alpine.data() to load a function. Why is init running twice?
datatable.js

export default function MyDataTable(options) {
    return {
        table: null,
        options: options,
        init() {
            console.log('this was run');
            let optionss = {
                // destroy: true,
                // destroy: true,
                // dom: `t`,
                // info: false,
                // paging: false,
                // searching: true,
                // order: [],
                // columnDefs: [
                //     { targets:'_all', orderable: false }
                // ],
            };
            this.table = $(this.$el).DataTable(optionss);
    }
}

Blade file

 <table x-data="datatables(line_sale_options)"</table

document.addEventListener('alpine:init', () => {
    Alpine.data('datatables', MyDataTable);
})

i am seeing 'this was run' two times in the console and this is causing an error with data tables.

Why is init running twice?

[argonzalez2016]

Init only runs twice when this.table = $(this.$el).DataTable(optionss); is run.

It doesnt run twice when that line is removed. What could be the cause?

[SimoTod]

I believe jquery's datatable removes and reinsert the component so Alpine thinks it's a brand new component. I don't think there's anything you can do unless you change datatable with something else. You can probably just accept the behavior and at the beginning of x-init, you can add a simple check like if (this.table) return to avoid any side effects.

[argonzalez2016]

I figured that out! Thank you!

DataTable's latest release has a non jquery version that works perfectly.