title: Best approach to change variable value outside of Vue component
body: <p>I am searching for the best approach to change Vue variable value outside of component. I'm using <a href="https://github.com/vuejs-templates/webpack" rel="nofollow noreferrer">Vue webpack</a> as well. </p>
  
  <p>I have created a project using vue webpack.
  Inside its default <em>App.vue</em> file, I have a variable. For example, let's take <strong>showModal</strong> and its default value is <strong>false</strong>.
  Then I built it in a single javascript file.</p>
  
  <pre><code>&lt;button&gt;Register&lt;/button&gt; {{-- event button --}}
  &lt;div id="guest"&gt;&lt;/div&gt; {{-- Here I'm rendering my template --}}
  
  &lt;script src="{{ asset('js/vue-js/guest.js') }}"&gt;&lt;/script&gt; {{-- builded Javascript file --}}
  </code></pre>
  
  <p>And the problem is that I want to change my <strong>showModal</strong> variable to <strong>true</strong>, but the event button it is not on my component template.</p>
  
  <p>What is the best approach to accomplish this?</p>