Vue $refs undefined when accessing property of element - vue.js

Question

I have an element part of a modal, like this:
<template>
<portal to="portal-level-3">
<div
v-if="isOpen"
class="fixed z-50 px-4 pb-4 inset-0 flex items-center justify-center"
:class="[isContentHeightGreaterThanHolder ? 'items-baseline' : 'items-center']"
>
<div
class="fixed inset-0 transition-opacity"
enter-active-class="ease-out duration-300"
enter-class="opacity-0"
enter-to-class="scale-100"
leave-active-class="ease-in duration-200"
leave-class="opacity-100"
leave-to-class="opacity-0"
>
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div
v-if="isOpen"
v-click-outside="closeModal"
ref="refContent"
:class="[
notFullWidth ? '' : 'w-full',
modalWidthClass
]"
class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all px-4 pt-5 pb-4"
enter-active-class="ease-out duration-300"
enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-200"
leave-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div class="flex mb-4">
<div v-if="title" class="flex-1">
<h3 class="text-lg leading-6 font-medium text-brand">
{{ title }}
</h3>
</div>
<div class="pl-3">
<button
#click.prevent="closeModal()"
type="button"
class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
>
<font-awesome-icon class="h-6 w-6" :icon="['fal', 'times']" />
</button>
</div>
</div>
<slot></slot>
</div>
</div>
</portal>
</template>
In the Vue instance, I watch for the modal opening like this:
watch: {
visible(val) {
this.isOpen = val
},
isOpen(val) {
if (val) {
this.$nextTick(() => {
let holderHeight = this.$el.offsetHeight
let contentHeight = this.$refs.refContent.offsetHeight
this.isContentHeightGreaterThanHolder = contentHeight >= (holderHeight - 30)
})
}
}
},
But this results in:
"TypeError: Cannot read property 'offsetHeight' of undefined"
But if I console.log(this.$refs) I get:
{}
refContent: div.bg-white.rounded-lg.overflow-hidden.shadow-xl.transform.transition-all.px-4.pt-5.pb-4.w-full.max-w-xl
##clickoutsideContext: {id: 5, methodName: "closeModal", documentHandler: ƒ, bindingFn: ƒ}
accessKey: ""
align: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
....
offsetHeight: 805
Why can I not access this.$refs.refContent.offsetHeight? Thanks!