title: Vue.js loading indicator for computed property re-render
body: <p>I have a small web application written in Vue.js and I am trying to show a loading indicator on the page while a list of items is being filtered and re-rendered.  The list is not fetched asynchronously, it is just a list of items from a computed property, based on some filter fields and is updated as the filters are changed.  There is a delay of a few seconds before the list is updated in the UI because the list has about 1400 items and each item is a card-style component with an image, a button, icons, and some text.  I have attempted to show a "Loading..." message between filter changes and new list rendering, but can't seem to get it to show to the user.</p>
  
  <p>I have put together a simplified fiddle as an example: <a href="https://jsfiddle.net/zm4z9657/1/" rel="nofollow noreferrer">https://jsfiddle.net/zm4z9657/1/</a></p>
  
  <p>EDIT: Here is the code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data: {
      even: false,
      loading: false
    },
    computed: {
      numbers: function() {
       this.rerender();
        return this.even ? _.range(0,100000,2) : _.range(0,100000);
      }
    },
    methods: {
      rerender: function() {
        var self = this;
        
        /* self.loading = true */;
        //this.$nextTick(() =&gt; {
         self.loading = true;
          console.log('re-render start')
          
          this.$nextTick(() =&gt; {
            self.loading = false;
            console.log('re-render end')
          })
        //})
      },
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/lodash"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;input type="checkbox" value="1" v-model="even" /&gt; even?
    &lt;div v-if="loading" id="loading"&gt;
      Loading...
    &lt;/div&gt;
    &lt;div v-else id="loaded"&gt;
      &lt;div&gt;
        &lt;div v-for="number in numbers" :key="number"&gt;{{number}}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The sample shows a list of numbers 1-100000, and when you click the "even ?" checkbox filter, it causes the list to update with only even numbers.  100000 was used to show the slight delay in the rendering of the new list.  If you inspect the DOM, you can see that after checking/unchecking the checkbox, the <code>&lt;div id="loading"&gt;</code> pops into the DOM for a short bit, then changes over to the new list inside <code>&lt;div id="loaded"&gt;</code>.  Although the loading <code>&lt;div&gt;</code> is shown in the DOM, it is never updated in the UI.</p>
  
  <p>I have code I hoped would show "loading" when the computed property is called, and when the list is done rendering, hide it and show the list.  Why is this not working?  Why does the DOM change, but the UI is never updated?  Is the UI not updating because all the dynamic elements are in the same component and it is not flushed until the list is done rendering?  Is there a better way to achieve this?</p>
  
  <p>Thanks!</p>