Instantiate JS plugin after API call

Question

I'm using the Bootstrap/JS Datatables plugin found at https://datatables.net/manual/installation to allow users to manage the contents of a table.

The plugin, however, only needs to instantiate after I have made an API call, which fetches the necessary rows for the table.

I'm using a Vue.js component and Axios to achieve this.

Here's my Vue component.

<template>
<div>

    <table id="bakery-orders" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="bakery-orders-info">
        <thead>
            <tr role="row">
                <th>Order#</th>
                <th>Customer</th>
                <th>QTY</th>
                <th>Product</th>
                <th>Variations</th>
                <th>Timeslot</th>
                <th>Transport</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" v-for="variationOrder in variationOrders">
                <td class="sorting_1">{{ variationOrder.order_id }}</td>
                <td>{{ variationOrder.customer_name }}</td>
                <td>{{ variationOrder.qty }}</td>
                <td>{{ variationOrder.product_name }}</td>
                <td>  
                    <p v-for="variation in JSON.parse(variationOrder.variation)">{{ variation.key }} <strong>{{ variation.value }}</strong></p>   
                </td>
                <td>A</td>
                <td>
                    <p v-if="variationOrder.store_id">Pickup</p>
                    <p v-else>Transport</p>
                </td>
                <td>
                    <a class="btn btn-app">
                        <i class="fa fa-check"></i> Done
                    </a>
                    <a class="btn btn-app">
                        <i class="fa fa-close"></i> Cancel
                    </a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th rowspan="1" colspan="1">Order#</th>
                <th rowspan="1" colspan="1">Customer</th>
                <th rowspan="1" colspan="1">QTY</th>
                <th rowspan="1" colspan="1">Product</th>
                <th rowspan="1" colspan="1">Variations</th>
                <th rowspan="1" colspan="1">Timeslot</th>
                <th rowspan="1" colspan="1">Transport</th>
                <th rowspan="1" colspan="1">Actions</th>
            </tr>
        </tfoot>
    </table>

</div>
</template>

<script>
    export default {
        data: function() {
            return {
                variationOrders: [],
            }
        },
        methods: {
            getTotals: function() {
                var self = this;
                axios.get('/api/v1/order_variations')
                .then(function (response) {
                    self.variationOrders = response.data.order_variations;
                    jQuery('#bakery-orders').DataTable();
                    jQuery('table').tableExport({
                        formats: ['csv'],
                    });
                    //console.log(response.data.order_variations);
                })
                .catch(function(error) {
                    //
                });
            },
        },
        mounted: function() {
            this.getTotals();
            // call the API every 30 seconds to fetch new orders
            setInterval(function () {
                this.getTotals();
            }.bind(this), 5000); 
        }
    }
</script>

The code, which is responsible for the plugin instantiation is

jQuery('#bakery-orders').DataTable();

This code runs within as soon as there is a successful call to the API.

I have also tried this

window.getElementById('bakery-orders').DataTable();

to no avail.

I also get no errors in the console. The plugin simply does not seem to instantiate at all.