title: With VueJS Cli how should do to have a variable common to all pages and be able to watch it in a page
body: <p>I'm relatively new to VueJs and I'm stuck on a project and I can't find a solution online. </p>
  
  <p>I want to have a variable commun to all pages (month), and when that variable change I want to be able to do something on my page.</p>
  
  <p>Example of what I want to do (simplified)</p>
  
  <p>In App.vue</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div id="topBar"&gt;
        &lt;div id="nav"&gt;
          &lt;div&gt;&lt;router-link to="/"&gt;Home&lt;/router-link&gt;&lt;/div&gt;
          &lt;div&gt;&lt;router-link to="/expenses"&gt;Dépenses&lt;/router-link&gt;&lt;/div&gt;
          &lt;div&gt;&lt;router-link to="/revenues"&gt;Revenus&lt;/router-link&gt;&lt;/div&gt;
          &lt;div&gt;&lt;router-link to="/category"&gt;Categories&lt;/router-link&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;select name="selectMonth" v-model="month" id="selectMonth" required&gt;
          &lt;option v-for="(month, index) in months" :key="index" :value=month&gt;{{ month }}&lt;/option&gt;
      &lt;/select&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>In Home.vue or any other page</p>
  
  <pre><code>watch: {
      month: function () {
        this.getExpenses() // or something else (In this case I want to fetch data again with a new month)
      }
    },
  </code></pre>
  
  <p>But since the variable is changed on the app.vue, (no matter what page I'm on) I can't watch it on my page.</p>
  
  <p>Do you know how I should do? What is the best practice for that kind of stuff?</p>
  
  <p>Thanks in advance if someone can help me!</p>
  
  <p><strong>EDIT: SOLVED</strong></p>
  
  <p>State Management and $emit did the trick. While discovering Vuex I found out that my app didn't need such a big state manager so I've found another way (based on the same idea):</p>
  
  <p>I've created a bus.js with an empty Vue instance:</p>
  
  <pre><code>import Vue from 'vue'
  const bus = new Vue()
  
  export default bus
  </code></pre>
  
  <p>Then in my component I use </p>
  
  <pre><code>import bus from '../bus'
  
  ... 
  
  onChangeMonth () {
        bus.$emit('new-month', this.month)
      },
  
  </code></pre>
  
  <p>And on my pages :</p>
  
  <pre><code>import bus from '../bus'
  
  ...
  
  created () {
      bus.$on('new-month', this.getExpenses)
    },
  </code></pre>