'this. $ refs' всегда пусто в родительском компоненте

Я пытаюсь сделать стандартную реализацию ref, чтобы я мог вставлять дочерние элементы в свой InfoBox. Но все, что я называю элементом 'ref', никогда не попадает в мой компонент InfoBox. Результатом всегда является {} undefined из журнала вызовов.

Обработчик кликов предназначен для проверки проблем с синхронизацией, поскольку использование created против mounted казалось распространенной проблемой.

<InfoBox
  v-if = "waitingForCode">
  <p ref = "infoboxcontent">A 7-digit verification code has been sent.</p>
</InfoBox>

а также

<template>
  <div
    class = "info-box"
    @click = "clicked" >
    {{ this.$refs.infoboxcontent }}
  </div>
</template>

<script>
export default {
  name: 'InfoBox',
  mounted() {
    console.info(this.$refs, this.$refs.infoboxcontent)
  },
  methods: {
    clicked() {
      console.info(this.$refs, this.$refs.infoboxcontent)
    }
  }
}
</script>

<style scoped>
  // some style
</style>

Я начинаю думать, что в корне неправильно понимаю использование атрибута ref, поскольку это кажется тривиальным примером. Любая помощь будет принята с благодарностью.