Давайте я оформлю комментарий ответом.
Если мы берет Vue.js то мы должны понимать основополагающие концепции этого прекрасного инструмента.
Если быть кратким, то Vue берет на себя всю ответственность за слежением изменения и вывода модели согласно написанным вами же компонентов и условий их появления.
Чтобы быть понятнее. Представьте что у вас есть некий объект в корневом компоненте. Вы этот объект описываете в data
, т.е. вашем примере вы описываете что то похожее -
el: '#app',
template: {'<auth-input v-if="mydata.isShowInput"></auth-input>},
methods: {
changeShowInput: function () {
this.mydata.isShowInput = !this.mydata.isShowInput
}
},
data: {
mydata: { isShowInput: false }
}
.......
Далее вы в template корневого элемента вставляете ваш компонент но с условием отображения. Vue посмотрит на данные вашего условия и увидит что в объекте с ключем isShowInput - false и не отобразит элемент.
Вашей задачей остается изменить это поле в объекте. Вы попросту можете создать компонент с ссылкой, который выполнит функцию changeShowInput, которая в свою очередь изменит в вашей модели соответствующий пункт. Vue сам увидит эти изменения и отрисует (или скроет) ваш компонент.
Что же происходит у вас в коде. Вы в коде через JQuery вставляете в DOM некий кастомный тег. Он валидный, однако Vue его не видит и видеть не может потому что он работает именно так, как работает, а ни как иначе.
Вам лишь остается создать компонент со ссылкой, и если это будет дочерний компонент - передать event родителю, если же нет - попросту вешайте обработчик на нужное вам событие и выполняйте изменение модели. Остальное Vue сделает за вас.
<auth-input v-if="isShowInput"></auth-input>
. Описываете объект в data. А на клик вы вешаете обработчик которые меняет значение объекта с ключем isShowInput значение меняет а противоположное. Фреймворк сам увидит изменение и отрисует либо не отрисует ваш компонент.