How to access Meteor Data in Vue `mounted()` method?


I am using Meteor+Vue, I am trying to create my own Google Maps component since the Vue2 Google Maps library is not working for me.

I am following this tutorial on Medium, on how to create and use the component. The following is my component code:

    <div class="map-container">
        <div class="google-map" :id="mapName"></div>

    import {Meteor} from 'meteor/meteor';
    import Visits from '../../api/visits/visits';

    export default {
        name: 'google-map',
        props: ['name'],
        data: function () {
            return {
                mapName: + "-map",
                locations: []
        mounted: function () {
            const element = document.getElementById(this.mapName)
            const options = {
                zoom: 12,
                center: new google.maps.LatLng(9.005400, 38.763611),
                scrollwheel: false
            const map = new google.maps.Map(element, options);


            // My problem is here, the locations array is always empty
            this.locations.forEach((coord) => {
                const position = new google.maps.LatLng(, coord.lng);
                const marker = new google.maps.Marker({

        meteor: {
            $subscribe: {
                'visits': []
            locations() {
                return Visits.find({}, {fields: {location: 1, createdAt: 1}, sort: {createdAt: -1}})

In my mounted() method, the Meteor returned data is always empty. What am I doing wrong? How can I access the data so I can add markers to the map?


Did you try ?