Whenever I use VueUse.useMouse(), the results in console.log() change as I move the mouse. However, the results within <span></span> always remain 0. This is quite confusing to me, can someone please explain why this is happening? 😫😫😫
<script async="async" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dcca94d4d6ddccd5dc94cad1d0d4caf98897819789">[email protected]</a>/dist/es-module-shims.min.js"></script>
<script type="importmap">
{ "imports" : {
"vue" : "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7006051530435e435e44">[email protected]</a>/dist/vue.esm-browser.prod.js",
"@vueuse/core" : "https://cdn.jsdelivr.net/npm/@vueuse/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482b273a2d087978667a6679">[email protected]</a>/+esm"
} }
</script>
<div id="app01">
<!-- xy always 0 -->
<span>mouse : {{x}} | {{y}}</span>
</div>
<script type="module">
import * as Vue from 'vue';
import * as VueUse from '@vueuse/core'
let vc01 = Vue.createApp({
setup : function(props, {attrs, emit, slots, expose, }){
let { x, y, } = VueUse.useMouse();
// log will change when mouse move
setInterval(function(){
console.log(x.value, y.value);
}, 1000);
return { x, y, };
},
});
let vi01 = vc01.mount('#app01');
</script>