List not rendering in v-for directive

Question

I have what seems to be a pretty straightforward list rendering situation but can't seem to get it to work. I have a component that when the mounted event fires sends an async call to an API to get data. Upon fetching the data, it sets the packages array with the value of the data. However, the list never actually renders in Vue. I've done this a number of times before without issue. Not sure what the problem is now.

Vue.component("tech-editing-queue", {
    props: [],
    data: function () {
        return {
            packages: []
        };
    },

    template: `
        <div>
            <div class="table-responsive">
                    <table id="package-table" class="table table-striped">
                        <thead>
                            <tr>
                                <th><a href="#" style="color: inherit;">Package</a></th>
                                <th><a href="#" style="color: inherit;">Submitter</a></th>
                                <th><a href="#" style="color: inherit;">Status</a></th>
                                <th><a href="#" style="color: inherit;">Pages</a></th>
                                <th><a href="#" style="color: inherit;">Review Type</a></th>
                                <th><a href="#" style="color: inherit;">Description</a></th>
                                <th><a href="#" style="color: inherit;">Document Name(s)</a></th>
                                <th><a href="#" style="color: inherit;">Submission Date</a></th>
                                <th><a href="#" style="color: inherit;">Requested Due Date</a></th>
                                <th><a href="#" style="color: inherit;"></a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="package in packages">
                                <td>
                                    <button type="button" class="btn btn-link">
                                        <span class="glyphicon glyphicon-duplicate"></span>
                                        <span style="margin: 0px 6px;">{{ package.PackageName }}</span>
                                        <span class="label label-primary" style="border-radius: 50%;">1</span>
                                    </button>
                                </td>
                                <td>{{ package.Submitter.LastName }}, {{ package.Submitter.FirstName }}</td>
                                <td>
                                    <h4 style="margin: 0px;">
                                        <span class="label label-info">
                                            {{ package.StateString }}
                                        </span>
                                    </h4>
                                </td>
                                <td>{{ package.Pages }}</td>
                                <td>{{ package.ReviewType }}</td>
                                <td>{{ package.DocumentType.Description }}</td>
                                <td><span>{{ package.DocumentNames }}</span></td>
                                <td><span>{{ package.SubmissionDate }}</span></td>
                                <td><span>{{ package.RequestedDueDate }}</span></td>
                                <td><button id="package-menu-7112" type="button" class="btn btn-link"><i class=" fa fa-ellipsis-h fa-1x undefined" aria-hidden="true"></i></button></td>
                            </tr>
                        </tbody>
                    </table>
            </div>
        </div>
    `,

    mounted: function () {
        fetch("/api/tech-editing-packages")
            .then(res => res.json())
            .then(response => this.packages = response)
            .catch(error => console.log("Packages Error: ", error));
    },

    watch: {},

    methods: {}
});

This packages list looks like this:

list view

The page looks like this after rendering.

page view

I expect the page to render the packages in table form but it doesn't.

Answer 1

Try check if has items before redder the items:

<tr v-if="packages.length > 0" v-for="package in packages">

or

<tr v-if="packages[0].Submitter !== undefiend" v-for="package in packages">

Answer 2

I figured this out eventually. I inherited this project from someone else and they had several other javascript libraries being loaded other than Vue. After removing all the libraries other than the ones I needed specifically for my own code, it worked fine. Apparently another library was interfering. I'm not sure which at this point. Thanks for the help.