Displaying markers on Leaflet Map

Hi. Ive built a Leaflet component as a bit of a test for myself but am a little stuck on getting information from the database to display as markers.

What im trying to do is to have a map with layers, so when you click (in my example) a checkbox for "porpoise" or "Harbour dolphins" it shows the markers for those.

Now i have it working if i put the information in an array hardcoded.

data(){
        return {
            map: null,
            tileLayer: null,
            layers: [
                {
                    id: 0,
                    name: 'Bottlenose',
                    active: false,
                    features: [
                        {
                            id: 0,
                            name: 'Test',
                            type: 'marker',
                            coords: [52.153761, -4.570154],
                        },
                        {
                            id: 1,
                            name: "<strong>Test</strong> <br> Try this",
                            type: 'marker',
                            coords: [52.155878, -4.571154],
                        }
                    ],
                },
                {
                    id: 1,
                    name: 'Porpoise',
                    active: false,
                    features: [
                        {
                            id: 0,
                            name: 'Test 4',
                            type: 'marker',
                            coords: [52.353761, -4.670154],
                        },
                        {
                            id: 1,
                            name: 'Test 5',
                            type: 'marker',
                            coords: [52.255878, -4.471154],
                            draggable: true,
                        }
                    ],
                },
            ],
        }
    },

But if i set it to

    data(){
        return {
            map: null,
            tileLayer: null,
            layers: [],
        }
    },

mounted() {
        this.getLocations();
        this.initMap();
        this.initLayers();
    },

    methods: {

        getLocations(){
            axios.get("/api/v1/get-locations")
            .then((response)  =>  {
                this.layers = response.data;
            }, (error)  =>  {
            })
        },

        initMap() {
            this.map = L.map('map').setView([52.434915, -3.715368], 8);
            this.tileLayer = L.tileLayer(
                'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
                {
                    maxZoom: 18,
                    attribution: '© Cloud Wales',
                    id: 'mapbox.streets',
                    accessToken: 'pk.eyJ1Ijoic2tvb2JpIiwiYSI6ImNqaGtyb3NyeTBid2czNnA2c2l3Y2NjcDEifQ.eVhvdNXnc_DCybH1Jd1PtQ'
                }
                );
            this.tileLayer.addTo(this.map);
        },

        initLayers() {
            this.layers.forEach((layer) => {
                const markerFeatures = layer.features.filter(feature => feature.type === 'marker');
                const polygonFeatures = layer.features.filter(feature => feature.type === 'polygon');

                markerFeatures.forEach((feature) => {
                    feature.leafletObject = L.marker(feature.coords)
                    .bindPopup(feature.name);
                });

                polygonFeatures.forEach((feature) => {
                    feature.leafletObject = L.polygon(feature.coords)
                    .bindPopup(feature.name);
                });
            });
        },

        layerChanged(layerId, active) {
            const layer = this.layers.find(layer => layer.id === layerId);
            layer.features.forEach((feature) => {
                if (active) {
                    feature.leafletObject.addTo(this.map);
                } else {
                    feature.leafletObject.removeFrom(this.map);
                }
            });
        },
    },

Then it shows the layers and checkboxes but not the data for the features.

Heres how the data comes from the db::

[
{
"id": 1,
"name": "Porpoise",
"active": 0,
"features": [
{
"id": 1,
"category_id": 1,
"name": "This is. a test",
"type": "marker",
"coords": "[52.434915, -3.715368]",
"created_at": "2018-05-27 09:15:19",
"updated_at": "2018-05-27 09:15:19"
},
{
"id": 3,
"category_id": 1,
"name": "It was in mwnt",
"type": "marker",
"coords": "[52.424915, -3.725368]",
"created_at": "2018-05-27 09:37:12",
"updated_at": "2018-05-27 09:37:12"
}
]
},
{
"id": 2,
"name": "Harbour",
"active": 0,
"features": [
{
"id": 2,
"category_id": 2,
"name": "I saw it here",
"type": "marker",
"coords": "[52.444915, -3.735368]",
"created_at": "2018-05-27 09:34:27",
"updated_at": "2018-05-27 09:34:27"
}
]
}
]

When its like this it comes up with an error Uncaught TypeError: Cannot read property 'addTo' of undefined

Any help or info would be great. Many thanks