Template ref do not trigger watchers

Question

I'm facing a weird issue about watchers and template refs.

I have the following component in which I used an slot.

<template>
  <div
    class="state.widgetClasses"
    ref="widgetElement"
  >
    <slot />
  </div>
</template>

The content in the <slot /> could be large and overflow the component, so I need to add behavior using widgetClasses. That property is being created using reactive as follow:

const state = reactive<State>({
  'widgetClasses': '',
  ...
});

The overflowed state could be detected using scrollHeigth and scrollClient provided by the ref widgetElement, I used the following watchers to check if overflowed.

watch(
  () => widgetElement.value?.scrollHeigth,
  () => checkOverflow(),
  { 'flush': 'post' }
);

and

watchEffect(
  () => checkOverflow(),
  { 'flush': 'post' }
);

Both do not work, they only be triggered when the component is mounted (widgetElement is not undefined) and do not detect when widgetElement.vale.scrollHeigth changes after mounted.