Atomic heading component with h tag size validation. (Vue.js)

a_Heading.vue

<template>
<component class="a-heading" :is="`h${headingLevel}`" :style="{'font-weight': weight}">{{text}}</component>
</template>

<script>
export default {
  name: 'a_Heading',
  props: {
    level: {
      type: Number,
      required: true
    },
    text: {
      type: String,
      required: true
    },
    weight: {
      type: String,
      required: false,
      default: 'normal'
    }
  },
  computed: {
    headingLevel() {
      let headingLevel = null
      if (this.level < 1) {
        headingLevel = 1
      } else if (this.level > 6) {
        headingLevel = 6
      } else {
        headingLevel = this.level
      }
      return headingLevel
    }
  }
}
</script>

<style lang="scss" scoped>
.a-heading {
  position: relative;
}
</style>