Как выполнить условную отрисовку внутри template компонента VueJS?

<div id="controls">
 <font-size-number target="headline" value="30" min="20" max="50"></font-size-number>
</div>

Vue.component('font-size-number', {
 props: [ 'target', 'min', 'max'],
 template: '<p><input type="number" @input="onChange" v-bind:id="`${target}-number`" class="set"><span id="wrong">Неверное значение</span></p>',
 methods: {
  onChange(e) {
   if (e.target.value < Number(this.min) | e.target.value > Number(this.max)) {
     var wrong = true;
     console.log(wrong);
   } 
  },
 },
});

new Vue({ 
  el: '#controls',
});