Directions isn't getting rendered?

[exzib]

I'm trying to create a test directions that I will then replace with production directions, however for some reason it is not acting like it should, it seems like it successfully gets the directions but nothing is being rendered.

Here is my code:

            routeDirections() {
                this.googleInit();
                this.$gmapApiPromiseLazy().then(() => { 
                    this.directionsService = new google.maps.DirectionsService();
                    this.directionsDisplay = new google.maps.DirectionsRenderer();
                    this.directionsDisplay.setMap(this.$refs.map.$mapObject);
                    self = this;
                    var test_point = 'Chicago, IL';
                    var test_point_2 = 'Los Angeles, CA';
                    var waypoints = this.path;
                    self.directionsService.route({
                        origin: test_point,
                        destination: test_point_2,
                        waypoints: [
                            {
                            location: 'Joplin, MO',
                            stopover: false
                            },{
                            location: 'Oklahoma City, OK',
                            stopover: true
                            }],
                        travelMode: 'DRIVING',
                    }, function(response, status) {
                        if(status === "OK") {
                            self.directionsDisplay.setDirections(response);
                            console.log(response);
                        } else {
                            console.log('Directions request failed due to ' + status);
                        }
                    });
                 })
            }

[AidanHibbard]

For anyone having this issue a quick work around I've found is to draw a polyline over the path of the route. In the response object you can access the encoded polyline via response.routes[0].overview_polyline passing this into decodePath() will give you an array you can use in the gmap-polyline component

this.currentPath = google.maps.geometry.encoding.decodePath( response.routes[0].overview_polyline )

<GmapMap> <gmap-polyline :path="currentPath" :options="{ strokeColor: '#875ae7' }" /> </GmapMap>

Docs