this.$refs.key is undefined inside method

I have the following component based on Vuetify card component:

CardTemplate

<template>
  <HeightCalculator>
    <template #default="{ height }">
      <v-card>
        <v-card-title ref="title">
          {{ title }}
        </v-card-title>
        <v-card-text
          class="overflow-y-auto"
          :style="{ height: calcHeight(height) }"
        >
          <slot></slot>
        </v-card-text>
      </v-card>
    </template>
  </HeightCalculator>
</template>

<script>
import HeightCalculator from '../HeightCalculator.vue'

export default {

  props: {
    
    title: {
      type: String,
      required: true
    }
  },

  components: {
    HeightCalculator
  },

  methods: {

    calcHeight (height) {
      return `calc(${height} - ${this.$refs.title.clientHeight})`
    }
  }
}
</script>

NOTE: HeightCalculator is just a renderless component which returns a calculated height (in this case is going to be something like 50vh).

As you can see this.$refs.title is undefined therefore I cannot access to its .clientHeight. What am I doing wrong?