title: Dynamically change element's Index
body: <p>I am trying to make something like this:</p>
  
  <p>I press on the button and the window pops up, now this window's Index would be 1, if I press the other button the new window (div element) would appear but its index would be 2.</p>
  
  <p>Now I have the function - click which sets the index using the global Index variable and at the end of my function, I increase Index variable. But I am failing to get results - the Index variable is not increasing (it's increasing only then I am clicking on the same button). Any solutions?</p>
  
  <p>code:
  HTML</p>
  
  <pre><code>&lt;div @click="open(file.name)" class="folder"&gt;
      &lt;div class="folder-styling"&gt;
  
  
      &lt;div :style="{ 'background-image': 'url(/img/' + file.icon + '.png)' }" class="folder-icon"&gt;
  
      &lt;/div&gt;
      &lt;p&gt;{{file.name}}&lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>        open(folder){
  
  
         var doc = document.getElementById(folder)
         doc.style.zIndex = this.$index+1
         var tab = document.getElementById('tabs'+folder)
         doc.style.display = "block",
  
         tab.style.display = "inline-block",
         this.$props.file.active(true)
         this.index = this.$index + 1
         console.log(this.$index)
  
  
      }
  </code></pre>
  
  <p>Global variable inside main.js file:</p>
  
  <pre><code>Vue.prototype.$index = 1
  </code></pre>