<div id="app">
      <button @click="active = true">Open</button>
      
      <div class="second__wrapper" @mouseleave="active = false" :class="{open: active}">
         <div class="qwe">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore quasi, quos, obcaecati quis illum dolore sint error doloribus quae iure mollitia voluptatum sapiente perspiciatis nobis odio itaque deleniti vel. Nihil.
         </div>
      </div>
   </div>

.second__wrapper {
   width: 200px;
    height: 25px;
   background: yellow;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.5s ease;
}
.qwe {
   min-height: 25px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.second__wrapper.open {
   grid-template-rows: 1fr;
   height: auto;
     white-space: wrap;
   text-overflow: visible;
}

const app = new Vue({
   el: '#app',
   data() {
      return {
         active: false
      }
   },
});