title: preventing Vue from aggresively reusing dom-elements
body: <p>Condider the following snippet: </p>
  
  <pre><code>        &lt;template v-if="tryIsMobile" &gt;
            &lt;div class='device device-mobile-portrait' :class="deviceClass"&gt;
              &lt;div class="device-scroller-container"&gt;
                &lt;div class='device-scroller'&gt;
                  &lt;img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/template&gt;
  
          &lt;template v-else&gt;
            &lt;div class='device device-tablet-landscape' :class="deviceClass" &gt;
              &lt;div class="device-scroller-container"&gt;
                &lt;div class='device-scroller'&gt;
                  &lt;img  id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/template&gt;
  </code></pre>
  
  <p>This code conditionally renders one of the two images. Some user action results in the actual shown image to be toggled. </p>
  
  <p>What I'm seeing is the following: When toggling from say, <code>tryit-img-mobile</code> to <code>tryit-img-tablet</code>, the image loaded as part of <code>tryit-img-mobile</code> will get displayed with different dimensions instantly. However, during the time the image loads it's new source <code>:src="srcUrlTablet"</code>, the image with src <code>:src="srcUrlMobile"</code> still displays. </p>
  
  <p>This is probably due to Vue using the same img-tag for both the templates. How can I prevent Vue from doing this, and instead use seperate img-tags? </p>