Why is the VueJS component not rendering?

Question

Vue.js

HTML

<div class="card" id="patient_history">
    <div class="row container-fluid">
        <div class="col-9">
            <div class="col-12">
                <analyzes></analyzes>
            </div>
        </div>
    </div>
</div>
<template id="analyzes-template">
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
</template>

JS

Vue.component('analyzes', {
    template: '#analyzes-template',
    data: function () {
        return {
            active_analyzes_template: false,
        }
    },
    methods: {
        openTemplate: function () {
            this.active_analyzes_template = true
        },
        closeTemplate: function () {
            this.active_analyzes_template = false
        },
        onCancel: function () {
            this.close()
        },
        onConfirm: function () {
            this.close()
        }
    }
})

Vue.filter('printFormatDate', function (date) {
    if (!date) {
        return ''
    } else {
        return moment(date).format("DD.MM.YYYY")
    }
})

new Vue({
    delimiters: ['{>', '<}'],
    el: '#patient_history',
    data() {
        return {
            active_analyzes_template: false,
            patient: null,
            disease_history: null,
            form003y_str1: null,
            form003y_str2: null,
            form003y_str3: null,
            form003y_str4: null,
            form003y_str5s: null,
            form003y_str6: null,
            form003y_str7: null,
            operations: null,
        }
    },
    methods: {},
})

When the page loads, it turns out there is only a div block, there is no link.

<div style="display: none;">
        Анализы
</div>
{# ТУТ ДОЛЖНА БЫТЬ ССЫЛКА #}

Answer 1

At a minimum, the cant is that the root element must be one, and you have two of them. This is me about the template #analyzes-template- add a common parent to existing elements:

<template id="analyzes-template">
  <div>
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
  </div>
</template>