Why the result of VueUse.useMouse() without reactive?

I use VueUse.useMouse(), when I moving mouse, the results in console.log() will change, but the results in <span></span> always 0, I really can't understand, can anyone tell me why ? 😫😫😫

<script async="async" src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.0/dist/es-module-shims.min.js"></script>
<script type="importmap">
{ "imports" : {
    "vue"               : "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.prod.js",
    "@vueuse/core"      : "https://cdn.jsdelivr.net/npm/@vueuse/core@10.2.1/+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>

Solution

Oh, I see, is the +esm, we can't use jsdelivr provide the +esm file, because it will no read @vueuse/shared module. Change the code like below, that will be fine. 😑😑😑

<script async="async" src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.0/dist/es-module-shims.min.js"></script>
<script type="importmap">
{ "imports" : {
    "vue-demi"       : "https://cdn.jsdelivr.net/npm/vue-demi@0.14.5/lib/v3/index.min.mjs",
    "vue"            : "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.prod.js",
    "@vueuse/core"   : "https://cdn.jsdelivr.net/npm/@vueuse/core@10.2.1/index.min.mjs", 
    "@vueuse/shared" : "https://cdn.jsdelivr.net/npm/@vueuse/shared@10.2.1/index.min.mjs"
} }
</script>

<div id="app01">
    <span>mouse : {{x}} | {{y}}</span>
</div>

<script type="module">
import * as Vue from 'vue';
import * as VueUseCore from '@vueuse/core';

let vc01 = Vue.createApp({
    setup : function(props, {attrs, emit, slots, expose, }){
        let { x, y, } = VueUseCore.useMouse();
        return { x, y, };
    },
});

let vi01 = vc01.mount('#app01');
</script>