Include router-link in google maps infowindows - vuejs

I am building an app in Laravel 5.7 with VueJS. I have a google map (built using vue2-google-maps) with 200+ markers, each with an infowindow. I would like to include a router-link within the infoWindow but it seems that as the link is passed as a string it is not being parsed by Vue.

This is my component at the moment - all working except the

Can anyone suggest a way of getting vue to parse the

<template>
<div id="map">

    <gmap-map
            :center="center"
            :zoom="11"
            style="width:100%;  height: 750px;"
            map-type-id="satellite"
    >

        <GmapMarker v-for="location in locations"
                    :key="location.id"
                    @click="toggleInfoWindow(location, location.id)"
                    :position="({
                        lat : location.latitude,
                        lng : location.longitude,
                        }
                    )"
                    :icon="getMarkerIcon(hasVisited(location.id), location.category_id)"
        ></GmapMarker>
        <gmap-info-window
                :options="infoOptions"
                :position="infoWindowPos"
                :opened="infoWinOpen"
                @closeclick="infoWinOpen=false"
        >
            <div v-html="infoContent"></div>
        </gmap-info-window>

    </gmap-map>


</div>
</template>

<script>

    export default {

        props:['user_id'],

        data() {
            return {
                // Dartmoor
                center: {lat: 50.5718959, lng: -3.9204181},
                locations: [],
                visits:[],
                infoContent: '',
                infoWindowPos: {
                    lat: 0,
                    lng: 0
                },
                infoWinOpen: false,
                currentMidx: null,
                //optional: offset infowindow so it visually sits nicely on top of our marker
                infoOptions: {
                    pixelOffset: {
                        width: 0,
                        height: -35
                    }
                }
            }

        },

        methods: {
            getLocations(){

                window.axios.get('/api/locations').then(({data})=>{
                    data.forEach(location => {
                        this.locations.push(location)
                    });
                });
            },

            getUserVisits(){

                if(this.user_id){
                    window.axios.get('/api/user/'+this.user_id+'/visits').then(({data})=>{
                        data.forEach(visit => {
                            this.visits.push(visit)
                        });
                    });
                }
            },

            hasVisited(loc_id){
                for(var i=0; i < this.visits.length; i++){
                    if( this.visits[i].location_id == loc_id){
                        return true
                    }
                }
                return false
            },

            toggleInfoWindow: function (marker, idx) {

                this.infoWindowPos = ({
                        lat : marker.latitude,
                        lng : marker.longitude,
                    }
                );
                this.infoContent = this.getInfoWindowContent(marker);

                //check if its the same marker that was selected if yes toggle
                if (this.currentMidx == idx) {
                    this.infoWinOpen = !this.infoWinOpen;
                }
                //if different marker set infowindow to open and reset current marker index
                else {
                    this.infoWinOpen = true;
                    this.currentMidx = idx;
                }
            },

            getInfoWindowContent: function (marker) {
                return(`<div class="info_window container">
                          <h3>${marker.name}</h3>
                          <a href="/location/${marker.slug}"><div class="mx-auto btn btn-success">More Info</div></a>
                          <router-link :to="/location/${marker.slug}" class="mx-auto btn btn-success">RL More Info</router-link>
                         </div>`);
            },

            getMarkerIcon(hasVisited, category_id){

                let type = "";
                let color = "";

                if(hasVisited){
                    type = 'stars'
                }else{
                    type = 'blank'
                }

                if(category_id == 1){
                    color = 'grn'
                }else{
                    color = 'blu'
                }

                return '/images/markers/'+color+'-'+type+'.png'

            }
        },

        created(){
            this.getLocations(),
            this.getUserVisits();

        },


    };
</script>

<style>

</style>

via Chebli Mohamed