Vue

HTML

<div id="app">
  <div>
    <span>
      <input name="checked_field" type="text" />
      <p class="has-warning danger" :style="{ display }">Test error</p>
    </span>
  </div>
</div>

CSS

.has-warning, .has-warning[style*='display: none'] {
  transition: all 1s;
  display: block !important;
  opacity: 0;
}

.has-warning:not([style*='display: none']) {
  height: 50px;
  opacity: 1;
}

Vue

new Vue({
  el: "#app",
  data: {
     display: 'none'
  },
  mounted: function() {
   // delay toggle to test
		setTimeout(function() {
        this.display = 'block';
    }.bind(this), 2000);
	}
})