динамическое добавление компонентом vue

Давайте я оформлю комментарий ответом. Если мы берет 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 сделает за вас.