title: Displaying a loading animation during a vue js function
body: <p>A simple show and hide on the loading element is failing during the Vue js function execution.  </p>
  
  <p>I have a vue js function which will do some things and update the data when it's done.  I'm trying to show a loading animation during this process.  I've dummied the process down to a simple loop for the purposes of this discussion to eliminate all other issues (i.e ajax, async, etc.).</p>
  
  <p>My HTMl for the button looks like this:</p>
  
  <pre><code>&lt;button type="button" v-on:click="DoStuff()"&gt;Do Stuff&lt;/button&gt;
  </code></pre>
  
  <p>My vue js code looks like this:</p>
  
  <pre><code>var client = new Vue({
      el: '#client',
      data: {
          someData: []
  },
  methods: {
      DoStuff: function() {
  
          //Show Loader
          $(".loader").show();
  
          //Waste 5 seconds
          for (var i = 0; i &lt; 100000000; i++) {
              var x = i;
          }
  
          //Hide loader
          $(".loader").hide();
  
          // let me know it's done.
          alert('cool');
      }
  </code></pre>
  
  <p>The loader never shows.  If I comment out the hide command, the loader show up AFTER the alert.  Makes me think some sort of async operation is going on under the hood but I'm not doing async stuff.</p>