title: Vue.js not updating automatically
body: <p>I have got this in my html code</p>
  
  <pre><code>&lt;div class="pl_wrapper"&gt;
      &lt;div class="options_pl"&gt;
          &lt;input type="button" @click="optionButtonClicked" class="option_button_pl" value="List"&gt;
          &lt;input type="button" @click="optionButtonClicked" class="option_button_pl" value="Add a language"&gt;
      &lt;/div&gt;
      {{show2}}
  &lt;/div&gt;
  </code></pre>
  
  <p>And this in my vue.js</p>
  
  <pre><code>const ProgrammingLanguages = new Vue({
              el:".pl_wrapper",
              data:{
                  name: "aa",
                  show1: false,
                  show2: false
              },
              methods: {
                  optionButtonClicked(){
                      var indexOfClicked  = index(event.target,event.target.className);
                      var equalIndexOfDiv = getOnIndex(indexOfClicked,"pl_divs")
                      $(".options_pl").hide();
                      show1 = (indexOfClicked==0) ? true : false
                      show2 = (indexOfClicked==1) ? true : false
                  }
              }
          });
  </code></pre>
  
  <p>Now when i click <code>option_button_pl</code> i expect <code>{{show2}}</code>'s to also change from false to true and vice versa.But alas that doesn't Jsfiddle: happen.<a href="https://jsfiddle.net/3akfzcyf/" rel="nofollow noreferrer">https://jsfiddle.net/3akfzcyf/</a> </p>