Javascript-форум - Вывод ссылок в html коде

Уважаемые форумчане! Помогите дописать правильный вывод ссылок в скрипте.
Есть скрипт, написанный одним человеком и доработанный другим участником данного форума.
Суть такая:
В поле Images вводится ссылка и отображается в html коде (справа) как img src... в двух местах.
В поле Links вводится другая ссылка и отображается в html коде (справа) a href=... между ссылками img src.
При вводе по одной ссылке в оба поля (images, links) все работает исправно (как надо). Проблема в том, что когда ссылки в оба поля вводятся от 2х и более, вывод становится не корректный и ссылка a href подписывается один раз в конце кода.
Необходимо, что бы при вводе ссылок в поля images и links (кол-во ссылок одинаковое) , выдавало html код вида img src.... a href.... img src... (вообщем так же, как при вводе в поля по одной ссылке).
Надеюсь понятно объяснил и надеюсь на вашу помощь!
Вот скрипт:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML output</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css">
</head>
<body class="pt-5">
<div id="app" class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="h3 pb-5">Generate HTML Template</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
                <div class="form-group">
                    <label for="title">Title:</label>
                    <input id="title" type="text" v-model="title" class="form-control">
                </div>

                <div class="form-group">
                    <label for="img-links">Images</label>
                    <textarea id="img-links" cols="30" rows="10" v-model="imgLinksPlain" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="a-links">Links</label>
                    <textarea id="a-links" cols="30" rows="10" v-model="hrefPlain" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" cols="30" rows="10" v-model="descriptionPlain" class="form-control"></textarea>
                </div>
        </div>

        <div class="col-md-6">
            <div class="form">
                <label for="rawhtml">Raw HTML</label>
                <textarea id="rawhtml" class="form-control" cols="30" rows="10" :value="html"></textarea>
                <html-output :title="title" :links="links" :description="description" :hrefs="hrefs" v-show="false" @updated="templateUpdated"></html-output>
            </div>
        </div>
    </div>
</div>

<template id="html-output">
    <div>
        <h2>{{title}}</h2>
        <template v-for="link, i in links">
            <img class="thumb-image" :data-src="link">
            <div v-if="(i + 1) == links.length" class="gallery-content">
                <a :data-href="hrefs[i]"  target="_blank">
                <img :data-src="link">
                </a>
            </div>

            <img v-else :data-src="link">
        </template>
        <h3><font size="5">PRODUKTINFORMATION:</font></h3>
        <ul style="">
            <li style="" v-for="item in description">
                <font size="4" style="">{{item}}</font>
            </li>
        </ul>
    </div>
</template>

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
Vue.component('html-output', {
    template: '#html-output',
    props: ['title', 'links', 'hrefs','description'],
    updated () {
        return this.$emit('updated', this.$el.innerHTML);
    }
});

new Vue({
    el: '#app',
    data: {
        title: '',
        imgLinksPlain: '',
        descriptionPlain: '',
        html: '',
        hrefPlain: ''
    },
    methods: {
        templateUpdated (data) {
            this.html = data.replace(/data-src/g, 'src').replace(/data-href/g, 'href');
        }
    },
    computed: {
        links() {
            return this.imgLinksPlain.trim().split("\n");
        },
        description () {
            return this.descriptionPlain.trim().split("\n");
        },
        hrefs(){ console.log(this.hrefPlain)
           return this.hrefPlain.trim().split("\n");
        }
    }
});
</script>
</body>
</html>