jsGrid is not loading in Vue application with static data

Question

I'm attempting to use jsGrid for a simple table with header sorting, but I'm having issues even getting the basic sample to load. This is a javascript and Vue application so it's nearly impossible to post ALL code as it's broken into many different components/files. I'll try to post the relevant parts.

HTML (symbol-container is my jsGrid div):

<div class="left-side-column">
    <div class="menu-container">
        <input id="processButton" type="button" value="Do it" v-on:click="processImage" :disabled="disable">
        <div v-if="symbols.length !== 0">
            <span id="symbol-header">{{ symbols.length }} threads</span>
            <div id="symbol-container">
                <!-- <table id="symbol-table">
                    <tr style="border: 1px solid black">
                        <th></th>
                        <th></th>
                        <th>DMC #</th>
                        <th>Count</th>
                    </tr>
                    <symbol-item v-for="(symbol, index) in symbols" :key="index" :symbol="symbol"></symbol-item>
                </table> -->
            </div>
            <span class="slider-label">Color Count:</span>
            <div id="reduce-color-slider"></div>
        </div>
    </div>
</div>

CSS

#symbol-container {
    height: 600px;
    overflow-y: auto;
}

Javascript

 processingComplete: function(stitcher) {
        this.symbols = stitcher.GetDMCList();

        var clients = [
            { Name: "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
            { Name: "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
            { Name: "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
            { Name: "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
            { Name: "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
        ];

        $('#symbol-container').jsGrid({
            width: "100%",
            height: "600px",
            pageLoading: false,
            inserting: true,
            editing: true,
            sorting: true,
            paging: false,
            autoload: true,
            data: clients,
            // controller: {
            //     loadData: function(filter) {
            //         console.log("loading");
            //         return clients;
            //     },
            //     insertItem: function(item) {
            //         console.log("insertItem being called..")
            //     },
            //     updateItem: function(item) {
            //         console.log("updateItem being called..")
            //     },
            //     deleteItem: function(item) {
            //         console.log("deleteItem being called..")
            //     }
            // },
            fields: [
                { name: "Name", type: "text", width: "50" }
            ]
        });

processingComplete() is called much later than page load after user interaction occurs. The goal is to set "this.symbols" to "data" as this is my actual data. I checked the format and it seems correct (image below). For now I'm just trying to set the static "clients" array to data. The commented section was me attempting to use the controller, but this didn't work for me either. I also think I might have a couple unneeded properties hanging around as I was trying many different things. I really only need sorting - no paging, editing, etc. I should also mention that I'm getting NO ERRORS or output of any kind in the console output.

Sample of this.symbols data:

Answer 1

It seems my "processingComplete" function needed to complete first. If you look at the html you will see that "symbol-container" is only created if:

<div v-if="symbols.length !== 0">

Inside "processingComplete" I was setting symbols to a list so I assumed I was good to use symbol-container. Seems Vue needed to process the v-if again before the div was available. I hope I'm explaining this ok.

My temporary solution was to throw the jsGrid code into a setTimeout(function() {}, 1000); This got it to display which answered the 'why' I was having so much trouble. In the end though I decided to NOT use jsGrid at all. I only needed the sorting for 3 columns and I hand rolled it pretty quickly.

Thanks to Bravo for pointing me in the right direction.