如何在@mouseenter时停止执行vue.js方法？

Question

当我将鼠标悬停在产品名称区域上时，我想执行一次方法。 但是只要我将鼠标悬停在该方法上，该方法就会执行多次。 我尝试了@ mouseenter.once，这只执行一次方法，但是再次悬停时该方法不起作用... 我的框架是Symfony4和vue.js。 我的代码如下。 请告诉我哪里错了。

-html

<td aria-label="product-name" class="prdct_popUp_main">
<div @mouseenter="productShow({{- p.id -}})" @mouseleave="productHide">
{{- p.id -}}:{{ p.name }}
</div>
<!-- popup of image whose visibility is controlled in CSS-->
<div class="popUp">
Image<br/>
<img src="productImageSrc" id="product_image">
</div>
</td>

-javascript

new Vue({
el: '#js-product-area',
data: {
timeoutId: "",
productImageSrc: ""
}
methods: {
productSearch: function (productId) {
        const url = Routing.generate('find_product_images');
        const response = await axios.get(url, {
            params: {
                productId: productId
            }
        });
        let pi = response.data.product.productImages[0];
        this.productImageSrc = pi.relativeUrl;
    },
productShow: function (productId) {
        this.timeoutId = setTimeout(this.productSearch, 500, productId);
    },
productHide: function () {
        clearTimeout(this.timeoutId) ;
    },
}