Vue.js 阻止 Vue 积极重用 dom 元素

附带以下代码片段:

        <template v-if="tryIsMobile" >
          <div class='device device-mobile-portrait' :class="deviceClass">
            <div class="device-scroller-container">
              <div class='device-scroller'>
                <img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
              </div>
            </div>
          </div>
        </template>

        <template v-else>
          <div class='device device-tablet-landscape' :class="deviceClass" >
            <div class="device-scroller-container">
              <div class='device-scroller'>
                <img  id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
              </div>
            </div>
          </div>
        </template>

这段代码有条件地呈现两个图像中的一个.一些用户操作会导致实际显示的图像被切换.

我看到的是:当从tryit-img-mobile切换到tryit-img-tablet时，作为tryit-img-mobile的一部分加载的图像将立即以不同的尺寸显示.然而，在图像加载其新源:src="srcUrlTablet"期间，仍然显示具有src :src="srcUrlMobile"的图像.

这可能是因为Vue对两个模板使用相同的img标记.我如何防止Vue这样做，而是使用单独的img标签？