I'm building a component in Vue 3 and using resize-observer-polyfill to observe my container size changes.
While converting stuff from prior vue 2 code to vue 3, I ran into an issue where ResizeObserver simply stopped working. It only triggered once, as I called .observe() and then stopped triggering.
I have pinpointed the issue to .observe call, which is made from onMounted lifecycle hook, like so:
onMounted(() => {
console.log('a', container.value, getComputedStyle(container.value).position);
resizeObserver.observe(container.value); // <-- not working
nextTick(() => resizeObserver.observe(container.value)); // <-- not working
setTimeout(() => resizeObserver.observe(container.value), 1); // <-- working! yay!
});
While I'd generally be happy about just leaving it in its newly working state, I can't help but wonder what it the cause of this required delay in .observe() call.
I have printed out container's (it's a ref to a div) style and its position was relative, display was block even without the delay.
So why do I have to wait to start observing if everything seems to be in place already?