Simple View more / Read more directive for vuejs based on number of lines. Add v-viewmore="MAXIMUM_LINES_T0_SHOW" to content div. Demo : https://codepen.io/dagalti/pen/vPOZaB

vue-viewmore-directive.js

/* How to Use? 

1. Add v-viewmore to content div.

2.Add CSS to the component. 

3. Javascript

import { viewmore } from 'vue-viewmore-directive.js'
 export default {
 name: 'Yourcomponent',
 data () {},
 directives:{viewmore},
 } */

 /* JAVASCIRPT */

export const viewmore = {
 inserted: function (el, binding){
      let maxlines = binding.value
      let lineheight = parseFloat(getComputedStyle(el).lineHeight)
      let paddingtop =  parseFloat(getComputedStyle(el).paddingTop) 
      let lines = (el.clientHeight) / lineheight ; 
      let maxheight = (lineheight * maxlines) + paddingtop

      if(lines>maxlines){
          el.classList.add('more')
          el.style.maxHeight = maxheight + 'px'
          el.addEventListener('click', handler = ()=> {
          el.style.maxHeight = ""
          el.scrollIntoView({behavior: "smooth"})
          el.removeEventListener('click', handler)
          el.classList.remove('more')
        })
      }
    },
    unbind: function (el, binding) {
          el.removeEventListener('click', handler)
          handler = ""
    }
 }

/* CSS */
.more{
  position: relative;
  overflow: hidden;
}
.more::after{
  content:"View more...";
  display: block;
  cursor:pointer;
  position: absolute;
  bottom: 5px;
  right: 3px;
  font-size: 12px;
  background: lightgreen;
  padding: 3px 10px;
}