TLDR;

Компоненты Vue можно использовать только внутри экземпляра vue!

// Vue instance for footer
new Vue({
el: '#footer'
});
// Define a new component called todo-item
Vue.component('app-footer', {
template: '<footer><p>&copy; 2019 - MyLovelyFooter</p></footer>'
});

Проблема

Сегодня я экспериментировал с vue внутри шаблона бритвы. Столкнулся с проблемой новичка:

<div id="footer">
    <app-footer></app-footer>
</div>
<script>
// Define a new component called app-footer
Vue.component('app-footer', {
    template: '<footer><p>&copy; 2019 - MyLovelyFooter</p></footer>'
});
</script>

Этот код не работал, и я не мог сразу понять, почему. Итак, я пошел и прочитал потрясающую документацию vue! Вот что заставило меня понять, что я должен был сделать и почему:

Компоненты — это многократно используемые экземпляры Vue с именем: в данном случае <button-counter>. Мы можем использовать этот компонент в качестве пользовательского элемента внутри корневого экземпляра Vue, созданного с помощью new Vue.

Решение

Поэтому я пошел и изменил код на:

<div id="footer">
    <app-footer></app-footer>
</div>
<script>
// Vue instance for footer
new Vue({
    el: '#footer'
});
// Define a new component called todo-item
Vue.component('app-footer', {
    template: '<footer><p>&copy; 2019 - MyLovelyFooter</p></footer>'
});
</script>

Это сработало!

Итог: Компоненты Vue можно использовать только внутри экземпляра vue!

Удачного кодирования!