title: Completely stop displaying a div by using conditionally rendering
body: <p>There is this one thing that is bothering me. I have this one line of code which uses the &quot;v-if&quot; tag, it is used to hide one of the menu items after you've used a setup tool.</p>
  <p>The problem here is that when you load up the page, it will display the menu item for half a second first which should be hidden directly from the start. How can I achieve this?</p>
  <p><strong>Here is the code:</strong></p>
  <pre><code>                &lt;li&gt;&lt;button v-show=&quot;!configCompleted&quot; class=&quot;btn&quot; @click=&quot;setComponent('setup')&quot;&gt;Setup&lt;/button&gt;&lt;/li&gt;
  </code></pre>
  <p><strong>beforeMount lifecycle hook:</strong></p>
  <pre><code>beforeMount() {
      this.setComponent(this.$route.params.page)
      this.user = JSON.parse(localStorage.getItem('vue-laravel-ecommerce. d fuser'))
      axios.defaults.headers.common['Content-Type'] = 'application/json'
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('vue-laravel-ecommerce.jwt')
      axios.get('/api/shop').then( response =&gt; {
          if ( response.data.length ) {
              this.configCompleted = true
          }
      });
  },
  </code></pre>