Tengo un componente de barra de navegación con un ancho variable en el siguiente formato:

 <template> <div class="container"> <div v-if="!!$scopedSlots.menu"> <slot name="menu" /> </div> ... </div> </template>

Estoy creando un nuevo componente que se puede colocar en esa ranura de "menú" que debería funcionar como un botón que abre un menú desplegable del ancho de toda la barra de navegación.

¿Hay una buena manera de monitorear de forma reactiva el ancho de ese container desde el componente secundario? Puedo obtener su ancho inicial en mounted() así:

 this.parentWidth = (this.$parent.$parent.$el as HTMLElement).offsetWidth;

Sin embargo, esto solo me da el ancho inicial de ese elemento. Si su contenedor crece, el componente secundario no crecerá de forma reactiva. Intenté cambiar esta asignación a un valor calculado, pero no puedo acceder al elemento principal cuando se procesa la página y los styles calculados vuelven indefinidos o, en el caso a continuación, con width: 'auto' sin importar qué:

 computed: { styles() { const parent = this.$parent.$parent.$el as HTMLElement; if(!!parent) { return {width: `${parent.offsetWidth}px`}; } else { return {width: 'auto'}; } } }