Auto font-resizing solution for vue

AutoFont.vue

<template>
  <div :style="'height: '+containerHeight" ref="container" class="d-flex justify-center align-center"
       v-intersect="resizeFont">
    <div ref="text" v-html="textHtml" style="word-break: break-all;line-height: normal;">

    </div>
  </div>
</template>

<script>
export default {
  name: "AutoFont",
  props: ['containerHeight', 'defaultFontSize', 'textHtml'],
  mounted() {
    this.resizeFont()
  },
  updated() {
    this.resizeFont()
  },
  methods: {
    resizeFont() {
      let containerEl, textEl
      containerEl = this.$refs.container
      textEl = this.$refs.text

      textEl.style.fontSize = this.defaultFontSize + 'px'
      let fontSize = this.defaultFontSize
      for (let i = 0; i < 100; i++) {
        if (containerEl.clientHeight < textEl.clientHeight) {
          fontSize--
          textEl.style.fontSize = fontSize + 'px'
        } else {
          break
        }
      }
    },
  }
}
</script>

<style scoped>
img{
  max-height: 250px;
}
</style>