看下例子，我搞不懂为啥promise没有按照预期那样

<template>
<span ref="a">{{a}}</span>
<button @click="click">按钮</button>
</template>
<script>
export default {
    data() {
        return {
            a: 1
        }
    },
    methods: {
        click() {
            this.a = 2;
            console.log(this.$refs.a.innerHTML); // 预期输出1
            Promise.resolve().then(() => {
                 // 预期输出1，实际输出2。
                console.log(this.$refs.a.innerHTML);
            })
        }
    }
}
</script>

在这个简单的实例中，我使用promise来输出a中的内容，理论上 promise 是微任务，在本轮宏任务完成后进行处理，然后才是渲染页面，所以我预期输出1，可是为什么确输出了2呢？是 vue 有另外的处理逻辑吗？