How to get object value from another component in vue script?

Question

I have 2 vue component in my PHP file: application and vn component. I want to get {{obj.vacancies_left}} from vn component and call it in application component. How should I do it? I keep getting undefined variable. I tried getting it by getElementById but it shows me undefined variable.

application vue component

var application = new Vue({
    el: '#engineerlist',
    data: {
        engineer: [],
        allData: '',
        actionButton:'Enrol',
        courseID: '',
    },
    methods:{
        decreaseVacancy:function() {
            axios.post('http://localhost/admin/decreaseVacancies.php',{
                action:'delete',
                CourseID: '101'

            }).then(function(response){
                var vacancy = document.getElementById("vacanciesleft").value;
                console.log(vacancy);
                alert(response.data.status);

            }).catch(function(error) {
                console.log(error);
            });
            
        }
    } 
});

vn vue component

var vn= new Vue({
    el: '#courseInfo',
    data: {
        courses: []
    },
    created: function() {
        axios.get('http://localhost/SPM-Group-3/admin/getSoftware.php')
        .then(response => {
                return_objs = response.data
                for (obj of return_objs) {
                    this.courses.push(obj)
                }
            })
            .catch(error => {
                this.courses = [{ value: 'There was an error: ' + error.message }]
            })
    }
});

This is the {{obj.vacancies_left}} that I want to retrieve in application vue component decreaseVacancy function

<div v-for="obj in courses" v-bind:value="obj">
    <h2 class="title">{{obj.courseID}}</h2>
    <h3 class="title">{{obj.courseName}}</h3>
    <p class="text">{{obj.description}}</p>
    <b>Total vacancies: </b> {{obj.vacancies}}<br>
    <b ref="vacanciesleft">Number of vacancies left: </b> <span id="vacanciesleft">{{obj.vacancies_left}}</span>
</div>

Answer 1

Sharing data across Vue Components.

• Parent -> Child . To pass data from Parent to Child you can use Props ,
• Child -> Parent . To pass data from Child to Parent you can use Events with $emit('my-event') . See Listening to Child Components Events
• Unrelated components can also share data using Event Bus with this.$root.$emit.

If using Vuex , I'd say that is the best way to share data across unrelated components.