title: v-if Not work when the function return true or false [VueJs]
body: <p>I am working on <strong>VueJs</strong>, And In my <code>template</code> section .. I defined a condition to check if the image URL exists or not.</p>
  
  <p><code>template</code>:</p>
  
  <pre><code>&lt;div v-for="(sub, key) in Work.sub" :key="sub.id" &gt;
    &lt;span v-if="Image('https://XXXX.blob.core.windows.net/XXXX/XXXXX-' + key +'.png')" &gt; 
       &lt;b-img :src="'https://XXXX.blob.core.windows.net/XXXX/XXXXX-' + key +'.png'" /&gt;
    &lt;/span&gt;
    &lt;span v-else&gt;
       &lt;b-img :src="default_avatar"/&gt; 
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In <code>script</code>:</p>
  
  <pre><code>Image: function(img_url)
  {
     return axios({
        method: "GET",
        timeout: 3000,
        headers: {
          .......................
        },
        url: img_url
     })
     .then( function(response){
        this.ifImageExist = true;
        return this.ifImageExist;
     })
     .catch( function(error){
        this.ifImageExist = false;
        return this.ifImageExist;
     })
  },
  </code></pre>
  
  <p>For <code>default_avatar</code> it is aleady definded in the <code>data section</code> and no problem with it.</p>
  
  <p>My problem is when the <code>Image</code> function checks if the image URL exists or not. If it exists it provides the image in the given URL, but if it does not exist, the image will be blank!</p>
  
  <p><strong>For example:</strong></p>
  
  <p>when I run the code, I result will be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/W20Bt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W20Bt.jpg" alt="enter image description here"></a></p>
  
  <p>But I want the first image to filled by default image, not show does not exist icon!</p>
  
  <p>How to solve this problem?</p>