Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
<script setup>
import { h, ref, onMounted, defineComponent, nextTick } from 'vue'
const Test = defineComponent({
setup() {
const flag = ref(true);
const elementRef = ref();
onMounted(async () => {
flag.value = false;
await nextTick();
console.log(elementRef.value);
});
return () => {
return [
flag.value && h('div', { ref: elementRef }, 'div1'),
!flag.value && h('div', {}, 'div2'),
];
};
},
});
</script>
<template>
<Test />
</template>
What is expected?
The final value of elementRef is null
What is actually happening?
The final value of elementRef is div2
System Info
System:
OS: macOS 14.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 3.62 GB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
npm: 10.8.3 - ~/.nvm/versions/node/v20.16.0/bin/npm
pnpm: 9.15.5 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
Browsers:
Chrome: 133.0.6943.55
Edge: 133.0.3065.69
Safari: 17.6
Any additional comments?
No response