How to set marks in Yandex map in Vue.js application?

Question

Yandex maps

Hello comrades! Please help me figure it out.
I'm trying to set marks on a Yandex map in a vue.js application.
js code :

export default {
        name: "YandexMap",
        data() {
            return {
                coordinates: []
            }
        },
        mounted() {
            // Установить скрипты для использования яндекс карты
            let scriptYandexMap = document.createElement('script');
            scriptYandexMap.setAttribute('src', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU');
            document.head.appendChild(scriptYandexMap);

            // Инициализировать яндекс карту
            scriptYandexMap.addEventListener("load", this.initializeYandexMap);

            // Выполнить "GET" запрос
            axios.get('URL').then(response => {
                let self = this;
                let coordinates = [];
                for (let i = 0; i < response.data.length; i++) {
                    coordinates.push([response.data[i]["LATITUDE"], response.data[i]["LONGITUDE"]]);
                }
                self.coordinates = coordinates;

                // Установить метки на яндекс карту
                self.setMarkers();
            });
        },
        methods: {
            initializeYandexMap() {
                ymaps.ready(function(){
                    self.map = new ymaps.Map("yandex-map", {
                        center: [48.352571497155054, 64.04235076905002],
                        zoom: 5,
                        controls: [zoomControl, searchControl, 'fullscreenControl'],
                        searchControlProvider: 'yandex#search'
                    });
                });
            },
            setMarkers() {
                for (let i = 0; i < this.coordinates.length; i++) {
                    let placemark = new ymaps.Placemark(this.coordinates[i]);
                    this.map.geoObjects.add(placemark);
                }
            }
        }
    }

I see the following error in the console:

Uncaught (in promise) TypeError: ymaps.Placemark is not a constructor
at VueComponent.setMarkers

Please tell me how to fix the error.

Answer 1

There is no guarantee that the map will load faster than you get the data for the labels (this does not happen, which is why the error occurs), so you should query the data after the map is ready for use - i.e., in ymaps.ready .
UPD. Taken from the comments:
No, not right. Think more. Let's assume you did. What happens if the map loads before the data? You won't see anything because the coordinates array will be empty when setMarkers is executed.
Once again: perform actions sequentially, not in parallel - first loading the map, then loading the data. This is the easiest option. Parallel loading is organized a little more complicated - you need to wrap ymaps.ready in a promise, and use Promise.all.
How it might look - the first option, the second (the request is replaced by setTimeout, but I think the essence is clear).