Accessing Object Properties VueJS

Question

I want to render a list, based on data I provide via my API. I made a screenshot of the current output. The problem is, that I cannot access my object properties. I get an error when loading the page. How do I access the properties correctly? @{{incident.incidentReference}} did not work.

<div class="row">
    <div class="col-lg-12">
        <ibox title="Einsätze">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Strasse</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="incident in incidents">
                    <td>@{{incident.incidentReference}}</td>
                </tr>
                </tbody>
            </table>
        </ibox>
    </div>
</div>

BASE.JS

// IMPORT ADDONS
import VueEvents from 'vue-events';
import dashboard from './dashboard';
import gis from './gis';
import MFSApi from './mixins/MFSApi';

window.Vue = Vue;
Vue.use(VueEvents);

// Will be called if there is no initMap function in component
window.initMap = () => {
    true
}


var Base = window.App = new Vue({
    el: '#wrapper',

    mixins: [MFSApi],

    components: {
        dashboard,
        gis
    }
});

COMPONENT DASHBOARD

export default {
    name: 'dashboard',
    mixins: [MFSApi],

    template: "#dashboard",

    components: {
        ibox
    },

    data() {
        return {
            searchAddress: '',
            incidents: []
        }
    },

    mounted: function() {
        this.getAllIncidents(function(response) {
            this.incidents = response.data["data"];
        }.bind(this))
    },

    methods: {

    },

    created() {
        console.info('Dashboard component triggered');
    }
}

I have incidents defined in the Vue Code and loop through the objects that seem to be there according to what you can see above. But I cannot access the content of the objects.

The data I get from the server, when the component

The code for getting the data from the server via API:

export default {
    methods: {
        // Incidents
        getAllIncidents: function(callback) {
            axios.get('api/v1/incidents').then(response => callback(response));
        },

        createIncidentTicket: function(incidentData, callback) {
            axios.post('api/v1/incidents', incidentData).then(response => callback(response));
        }
    }
}

The code for the wrapper where everything is loaded into:

<!-- Wrapper-->
    <div id="wrapper">

        <!-- Navigation -->
        @include('layouts.navigation')

        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">

            <!-- Page wrapper -->
            @include('layouts.topnavbar')

            <!-- Main view  -->
            @yield('content')

            <!-- Footer -->
            @include('layouts.footer')

        </div>
        <!-- End page wrapper-->

    </div>
    <!-- End wrapper-->

Answer 1

In the end, the issue here was the template for the dashboard component was nested inside the template for the Vue. When Vue compiled the wrapper template, it was trying to compile the dashboard component as part of it's own template, which resulted in the error shown in the question.