title: vue.js 2 Reusing component with two different parent variables
body: <p>Im trying to use a component which changes the years of experience with a programming language. ir order to do so i use a couple of buttons to add and subtract the years, and a 'tech' prop to pass the language. i.e: PHP, JS, etc.</p>
  
  <pre><code>&lt;script type="text/template" id="years_template"&gt;
  &lt;div&gt;
      &lt;p&gt;How mane years of experience with {{ tech }} do you have?&lt;/p&gt;
  
      &lt;p&gt;
          Answer: &lt;strong&gt;{{ years }}&lt;/strong&gt;
  
          &lt;button type="button"
                  class="btn"
                  @click="add"&gt;+&lt;/button&gt;
  
          &lt;button type="button"
                  :disabled="years == 0"
                  class="btn"
                  @click="sub"&gt;-&lt;/button&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>My global variables are years_php and years_JS, and im trying to reuse the component "years-exp" so each one changes each global variable. I manage to do one of them by following <a href="https://dotdev.co/peeking-into-vue-js-2-part-1-b457e60c88c6#.i25eyd6bj" rel="nofollow noreferrer">this</a> tutorial. However, when i wanted to reuse the years-exp component with just one emit and listen event, it always modified years_php variable, so i had to use a 'test' prop and check its value for different cases, here is my years-exp component: </p>
  
  <pre><code>Vue.component('years-exp', {
      template: '#years_template',
      data(){
        return {
          years : 0
        }
      },
      watch:{
        'years': function(years, oldYears){
          console.log('years changed from %s to %s', oldYears, years)
          switch (this.test) {
            case "years_php":
              bus.$emit('PHPyears-changed', years);
            break;
            case "years_js":
              bus.$emit('JSyears-changed', years);
            break;
          }
        },
      },
      methods: {
          add: function () {
              this.years++;
          },
          sub: function () {
              this.years--;
          },
      },
      props: ['test','tech']
  });
  </code></pre>
  
  <p>And add the following code to my Vue instance: </p>
  
  <pre><code>created: function () {
        // store this to use with Vue.set
        var temp = this;
        bus.$on('PHPyears-changed', function (years) {
          Vue.set(temp, 'years_php', years);
          //Vue.set(temp, 'years_js', years)
        });
        bus.$on('JSyears-changed', function (years) {
          Vue.set(temp, 'years_js', years);
          //Vue.set(temp, 'years_js', years)
        })
      },
  </code></pre>
  
  <p>And here i insert them in html:</p>
  
  <pre><code>    &lt;years-exp test="years_php" tech="PHP"&gt;&lt;/years-exp&gt;
      &lt;years-exp test="years_js" tech="JS"&gt;&lt;/years-exp&gt;
  </code></pre>
  
  <p>Is there another way to do this in Vue.JS 2+ ?</p>