title: How to get object value from another component in vue script?
body: <p>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.</p>
  <p>application vue component</p>
  <pre><code>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(&quot;vacanciesleft&quot;).value;
                  console.log(vacancy);
                  alert(response.data.status);
  
              }).catch(function(error) {
                  console.log(error);
              });
              
          }
      } 
  });
  </code></pre>
  <p>vn vue component</p>
  <pre><code>var vn= new Vue({
      el: '#courseInfo',
      data: {
          courses: []
      },
      created: function() {
          axios.get('http://localhost/SPM-Group-3/admin/getSoftware.php')
          .then(response =&gt; {
                  return_objs = response.data
                  for (obj of return_objs) {
                      this.courses.push(obj)
                  }
              })
              .catch(error =&gt; {
                  this.courses = [{ value: 'There was an error: ' + error.message }]
              })
      }
  });
  </code></pre>
  <p>This is the {{obj.vacancies_left}} that I want to retrieve in application vue component decreaseVacancy function</p>
  <pre><code>&lt;div v-for=&quot;obj in courses&quot; v-bind:value=&quot;obj&quot;&gt;
      &lt;h2 class=&quot;title&quot;&gt;{{obj.courseID}}&lt;/h2&gt;
      &lt;h3 class=&quot;title&quot;&gt;{{obj.courseName}}&lt;/h3&gt;
      &lt;p class=&quot;text&quot;&gt;{{obj.description}}&lt;/p&gt;
      &lt;b&gt;Total vacancies: &lt;/b&gt; {{obj.vacancies}}&lt;br&gt;
      &lt;b ref=&quot;vacanciesleft&quot;&gt;Number of vacancies left: &lt;/b&gt; &lt;span id=&quot;vacanciesleft&quot;&gt;{{obj.vacancies_left}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>