请给出vue2实现放大镜详细的最简洁的代码

HTML部分：

<div class="product-img">
  <img src="./original-img.jpg" alt="商品图片" class="img-normal">
  <div class="img-magnifier"></div>
</div>

CSS部分：

.product-img {
  position: relative;
  width: 600px;
  height: 400px;
}

.img-normal {
  max-width: 100%;
  max-height: 100%;
}

.img-magnifier {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  z-index: 999;
  display: none;
  background-repeat: no-repeat;
  background-size: 1200px 800px;
}

JavaScript部分：

new Vue({
  el: "#app",
  mounted() {
    const productImg = document.querySelector('.product-img');
    const imgNormal = productImg.querySelector('.img-normal');
    const imgMagnifier = productImg.querySelector('.img-magnifier');
    const magnifierWidth = imgMagnifier.offsetWidth;
    const magnifierHeight = imgMagnifier.offsetHeight;

    productImg.addEventListener('mousemove', function(e) {
      const x = e.pageX - productImg.offsetLeft - magnifierWidth / 2;
      const y = e.pageY - productImg.offsetTop - magnifierHeight / 2;

      const xMax = imgNormal.offsetWidth - magnifierWidth;
      const yMax = imgNormal.offsetHeight - magnifierHeight;

      if (x > xMax) {
        imgMagnifier.style.left = xMax + 'px';
      } else if (x < 0) {
        imgMagnifier.style.left = 0 + 'px';
      } else {
        imgMagnifier.style.left = x + 'px';
      }

      if (y > yMax) {
        imgMagnifier.style.top = yMax + 'px';
      } else if (y < 0) {
        imgMagnifier.style.top = 0 + 'px';
      } else {
        imgMagnifier.style.top = y + 'px';
      }

      imgMagnifier.style.backgroundImage = `url(${imgNormal.src})`;
      imgMagnifier.style.backgroundPosition = `-${x * 2}px -${y * 2}px`;
      imgMagnifier.style.display = 'block';
    });

    productImg.addEventListener('mouseout', function() {
      imgMagnifier.style.display = 'none';
    });
  }
});

说明：

首先，HTML部分定义了一个<div>包含<img>和<div>标签，其中<img>用于显示原始的商品图片，<div>用于放大镜的展示。<div>的初始display属性值为none，鼠标移入到<img>标签时，该<div>标签才会显示出来。

CSS部分使用CSS3的position、z-index、max-width、max-height、border等属性，将商品图片以及放大镜定位到合适的位置，不做赘述。

JavaScript部分使用ES6语法定义了一个Vue实例，该实例首先使用querySelector()方法获取了<img>和<div>标签的DOM节点，并在mounted()生命周期函数中监听了<div>标签的mousemove和mouseout事件。在节点mousemove事件中，处理好放大镜的位置和商品图片的展示即可。在节点mouseout事件中，隐藏放大镜。

完整的HTML+CSS+JavaScript代码实现可参考以下链接：

https://codepen.io/yidadaa/pen/ZEBxeop