VueJS - how component gets global data item?
<p>I have code like this :</p>

<pre><code>Vue.component("sample", {
    inherit: true,
    template: "#sample",
    props: {
       active : "active",
       ...
    },
    methods: {
      forceChangeActive: function(){
         var activeItem = this.$parent._data.active;
         var modalSetup = this.$parent._data.showModal;
         console.log("1.before function", this.$parent._data);
         this.$parent.$options.methods.baseAction(activeItem, modalSetup);
         console.log("2.before function", this.$parent._data);
      });
    }
});
new Vue({
    el: "#app",
    data: {
        active: 0,
        showModal: false,
        ...
    }, 
    methods: {
        baseAction: function(activeItem, modalSetup){
            console.log("3.modal", modalSetup, "activeItem": activeItem);
            modalSetup = true;
            activeItem = 2;
            console.log("4.modal", modalSetup, "activeItem": activeItem);
        }
    }
});
</code></pre>

<p>There are active and showModal data variables in new Vue. Now I'm getting undefined for both if I use this.active or this.showModal. 
And console output is:</p>

<blockquote>
  <ol>
  <li>before function  Object { active=0,  showModal=false }</li>
  <li>modal false, activeItem 0</li>
  <li>modal true, activeItem 2</li>
  <li>before function  Object { active=0,  showModal=false }</li>
  </ol>
</blockquote>

<p>How I can change variable`s values in new Vue or in component?</p>