Positioning based on size of rendered component - vue.js

Question

I have a Vue component which generates a part of an SVG.
Since text handling in SVG is a pain, I decided to use a foreignObject tag inside it in order to let the HTML and CSS inside it handle the layout.
The template part basically looks like this:
<template>
<g class="port">
<foreignObject ref="html">
<div class="port__wrapper" ref="wrapper">
<div class="port__label">{{ label }}</div>
<div class="port__content">{{ content }}</div>
</div>
</foreignObject>
</g>
</template>
Everything works fine until I try to position the part, based on its computed size. The size of my foreignObject has to be set manually. In order to do that, I need the computed size of my port__wrapper element.
Here is my current approach:
export default {
methods: {
calculateAndSetSize() {
const frame = this.$refs.html;
const wrapper = this.$refs.wrapper;
frame.setAttribute('width', `${wrapper.clientWidth}px`);
frame.setAttribute('height', `${wrapper.clientHeight}px`);
}
},
created() {
window.setTimeout(() => {
this.calculateAndSetSize();
// also some positioning stuff
}, 0);
}
}
I use the created lifecycle hook to ensure the component is created and use the setTimeout to move the calculation to the end of the render queue.
This works fine when I just move around inside my app, but if I refresh the page it only works 5/6 of the time. The calculation seems to be done just before the final render.
An example from Safari (even though it happens in all browsers):
I captured this, while my system was super slow. This usually happens in a fraction of a second
Before the component is fully rendered, this part is visible:
The component takes up a little bit less than double the size of the end-result. The calculation and positioning have happened and everything is aligned as expected (right side and vertically centered to the cross in the middle).
Almost correct, but then there is the final paint, which looks like this:
As you can see the positioning is totally off, since the element is way smaller and the calculations already happened.
The foreignObject sill has the wrong size:
(the last screenshot is from another build and looks a little different, but the problem stays the same)
I figured the problem might be the font loading and tried the execute the calculations after the document.fonts.ready promise, but that is even less consistent than the setTimeout approach.
Any hint what could cause this and how to work around it would be greatly appreciated.