Quiero dar la misma altura a un div que contiene Component2 que a otro div (modelDiv) que contiene Component1 .

 <template> <div> <div v-if="showMe"> <div ref="modelDiv"> <Component1/> </div> </div> <div v-else> <div :style="setDivHeight"> <Component2/> </div> </div> </div> </template> <script> export default { data() { return { displayMe: true, elementHeight: null, } }, computed: { showMe() { return this.displayMe }, setDivHeight() { return `height: ${this.elementHeight}px;` }, }, mounted() { this.$nextTick(function () { this.elementHeight = this.$refs.modelDiv[0].$el.clientHeight }) }, } </script>

Recibo este mensaje de error TypeError: Cannot read properties of undefined (reading '$el') and console.log('the height', this.$refs) me da modelDiv: undefined . No puedo entender por qué. Cualquier ayuda es bienvenida.