[Vuejs]-How to evaluate max length of a text area using vuejs computed property?

Computed properties must return the result of some computation.
Here, a watcher would be more appropriate. In this case, the value to watch would be the length of this.infoData.description. Consequently, I would first use a computed property to get the length of this.infoData.description and then use a watcher to monitor its value.

Here is my implementation:

<template>
  <div>
      <!--- Component HTML -->
   </div>
</template>

<script>
export default {
  props: {
    infoData: {
      type: Object,
      default: () => {
        return {
          category: "",
          side_categories: "",
          description: "",
          commentValidationState: null
        };
      }
    },
  },
  watch: {
    descriptionLength(new_value){
      if(new_value> 5){
        alert("Max length exceeded!");
      }
    }
  },
  computed: {
    descriptionLength(){
      return this.infoData.description?.length
    }
  }
}
</script>

And here is its parent:

<template>
  <div>
    <textarea v-model="infoData.description" />
    <MyComponent :infoData="infoData" />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      infoData: {
          category: "",
          side_categories: "",
          description: "",
          commentValidationState: null
      }
    }
  },
}
</script>