//Template
<div>
    <a href="#">
        <h5>{{ productNameStr | truncate(50) }}</h5>
    </a>
    <template v-if="productNameStr.length < 50">
        <p>{{ productDescriptionStr | truncate(50) }}</p>
    </template>
</div>

//Scripts
props: [
    'productName',
    'productDescription',
  ],
data(){
    return{
      productNameStr: '',
      productDescriptionStr: ''
    }
},
methods: {
    deleteFormattedHTML: function (value) {
      let htmlString, div, text
      htmlString = value
      div = document.createElement("DIV")
      div.innerHTML = htmlString
      text = div.textContent || div.innerText || ''
      div.remove()
      return text
    }
},
mounted(){
   this.productNameStr = this.deleteFormattedHTML(this.productName)
   this.productDescriptionStr = this.deleteFormattedHTML(this.productDescription)