title: Function called multiple times during Vue component render
body: <p>I have a component inside a route-view which is in turn part of another route-view so the tree is like this:</p>
  
  <pre><code>&lt;app&gt;
    &lt;appContainer&gt;  // This is a route-view
      &lt;myView&gt; // Also a route-view
        &lt;myComponent&gt;
  </code></pre>
  
  <p>In <code>myComponent</code> I have this conditional rendering:</p>
  
  <pre><code>&lt;b-button v-if="isAdmin(currentUser)'"&gt;
  </code></pre>
  
  <p>This function is exhibiting unexpected behaviors</p>
  
  <pre><code>isAdmin(username) {
    let userObject = this.$store.getters.getCurrentUserObject(username)
    return userObject.role === 'ADMIN'
  }
  </code></pre>
  
  <p>The <code>userObject</code> was turning up as <code>undefined</code> until I added a debugger inside the function and realized that this it's being called multiple times during page rendering some of which the store <code>data</code> property is still empty resulting in <code>getters</code> returning <code>null</code>. What could be the reason? Why is this method called multiple times?<br>
  PS: I have a for loop in the component, could this be the reason?</p>
  
  <pre><code>&lt;div v-for="bike in bikes":key="bike.timestamp"&gt;
    &lt;p&gt;{{ bike.name }}&lt;/p&gt;
    &lt;b-img fluid v-if="bike.imagePath" v-bind:src="returnImage(bike.imagePath)"&gt;&lt;/b-img&gt;
    &lt;p&gt;{{ bike.timestamp}}&lt;/p&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>This is called in the <code>created</code> hook</p>
  
  <pre><code>created() { 
     this.getBikes()
   }
  </code></pre>