How to correctly pass data from one component to another?

Question

JavaScript

Hello, comrades! Please help me figure it out.
There are marks on the Yandex map. When I click on them, I try to open an information window. For the information window, I created a separate InformationWindow component . I'm trying to transfer the data that I received with a GET request to this component. The problem is that the following error is thrown:

Uncaught TypeError: Cannot set property 'visible' of null

YandexMap.vue :

<template>
    <div>
        <div id="yandex-map"></div>
        <InformationWindow :incidents="incidents" v-if="visible"></InformationWindow>
    </div>
</template>

<script>
data() {
    return {
        visible: false,
        incidents: {
            ADDRESS: '',
            DESCRIPTION: '',
        },
    }
},

...

axios.get('URL').then(response => {
    for (let item = 0; item < response.data.length; item++) {
        // Создать метку
        let placemark = new ymaps.Placemark([response.data[item]["LATITUDE"], response.data[item]["LONGITUDE"]]);

        // Нанести метку на Яндекс карту
        this.map.geoObjects.add(placemark);

        // Событие на нажитие метки
        placemark.events.add('click', function(e) {
            // Вывести в консоль координаты метки
            console.log(e.get('coords'));

            // Передать переменные в компонент "InformationWindow"
            this.visible = true;
            this.incidents = response.data[item];
        });
    }
});
</script>

InformationWindow.vue :

<template>
    <div id="information-window">
        <div class="address">{{incidents.ADDRESS}}</div>
        <div class="description">{{incidents.DESCRIPTION}}</div>
    </div>
</template>

<script>
    export default {
        name: "InformationWindow",
        props: {
            incidents: {
                type: Object,
                required: true
            }
        }
    }
</script>

Answer 1

Right here

placemark.events.add('click', function(e) {
            // Вывести в консоль координаты метки
            console.log(e.get('coords'));

            // Передать переменные в компонент "InformationWindow"
            this.visible = true;
            this.incidents = response.data[item];
        });

inside the callback function you lose this, so use an arrow function

placemark.events.add('click', (e) => {
            // Вывести в консоль координаты метки
            console.log(e.get('coords'));

            // Передать переменные в компонент "InformationWindow"
            this.visible = true;
            this.incidents = response.data[item];
        });