vue3 自定义指令 数据更新两次但是 指令只更新一次

vue3 自定义指令 数据更新两次但是 指令只更新一次
代码里面 写了两个延时指令 理论上 页面显示的是第二个延时指令里面的数据
下面代码 只要有网复制到html文件就可以运行
求哪位帮我看下 `

<script>
    const {
        createApp,
        ref
    } = Vue

    const app = createApp({
        setup() {
            const times = ref('')
            setTimeout(() => {
                times.value = '2023-08-18 13:26:02'
            }, 1000)
            setTimeout(() => {
                times.value = '2023-08-10 13:26:02'
            }, 5000)
            return {
                times


            }
        }
    })
    app.directive('demo', (el, binding, ) => {
            console.log('==========el.textContent', el.textContent);
            if (!el.textContent) return
            el.textContent = dayjs(el.textContent).format('YYYY-MM-DD')
        }
        //  {
        //     updated: (el, binding, vnode, prevVnode) => {
        //         console.log('==========el.textContent', el.textContent);
        //         if (!el.textContent) return
        //         el.textContent = dayjs(el.textContent).format('YYYY-MM-DD')
        //             // el.textContent = dayjs(el.textContent).format('YYYY-MM-DD HH:mm:ss')
        //     }
        // }

    )
    app.mount('#app')
</script>

`