Подробнее о всех возможностях компонентов вы можете прочитать в документации Vue Основы компонентов Основы компонентов

Компоненты — это переиспользуемые экземпляры Vue со своим именем. В примере выше это button-counter. Его можно использовать как пользовательский тег внутри корневого экземпляра Vue, созданного с помощью new Vue.

Подробнее... и Продвинутые компоненты. Регистрация компонентов

При регистрации компонента у него всегда будет имя. Именем компонента будет первый аргумент.

Имя, которое даётся компоненту, может зависеть от того, где планируется его использовать. При использовании компонента непосредственно в DOM (в отличие от строковых шаблонов или однофайловых компонентов), настоятельно рекомендуем следовать правилам W3C для именования пользовательских тегов (все символы в нижнем регистре, должен содержаться дефис). Это позволит избежать конфликтов с текущими и будущими HTML-элементами.

Подробнее...

Примеры работы:

Определим новый компонент, назовем его bx-button-counter.

BX.Vue.component('bx-button-counter', 
{
	data() {
		return {
			count: 0
		}
	},
	template: '<button @click="count++">Счётчик кликов — {{ count }}</button>'
})

Его можно использовать как пользовательский тег внутри корневого экземпляра Vue, созданного с помощью BX.Vue.create({...}) или в шаблоне другого компонента.

<div id="vue-application"></div>
<script>
	BX.Vue.component('bx-button-counter', 
	{
		data()
		{
			return {
				count: 0
			}
		},
		template: '<button @click="count++">Счётчик кликов — {{ count }}</button>'
	});

	BX.Vue.create({ 
		el: '#vue-application',
		template: '<bx-button-counter/>' 
	});
</script>

Так как компоненты Vue.js - это переиспользуемые экземпляры Vue, то они принимают те же опции, что и BX.Vue.create, такие как data, computed, watch, methods, хуки жизненного цикла.

Единственными исключениями будут несколько специфичных для корневого экземпляра опций, например, el.

Переиспользование компонентов

Компоненты можно переиспользовать неограниченное количество раз:

<div id="vue-application"></div>
<script>
	BX.Vue.component('bx-button-counter', 
	{
		data() 
		{
			return {
				count: 0
			}
		},
		template: '<button @click="count++">Счётчик кликов — {{ count }}</button>'
	});

	BX.Vue.create({ 
		el: '#vue-application',
		template: `
			<div class="buttons">
				<bx-button-counter/>
				<bx-button-counter/>
				<bx-button-counter/>
			</div>
		` 
	});
</script>

Приложение организуется в виде дерева вложенных компонентов:

Например, могут быть компоненты для заголовка, боковой панели, зоны контента, каждый из которых может содержать другие компоненты для навигационных ссылок, постов блога и т.д.

Для использования этих компонентов в шаблоне они должны быть зарегистрированы, чтобы Vue узнал о них. Есть два типа регистрации компонентов: глобальная и локальная. В рамках экосистемы Битрикс используется только глобальная регистрация, подробнее о создании и причинах глобальной регистрации описано в уроке Создание компонентов. Создание компонентов

Глобальные компоненты располагаются в модуле ui в директории /modules/ui/install/js/ui/vue/components/. Компоненты, относящиеся к вашему модулю, вы можете располагать в директории /modules/<module>/install/js/<some_path>.

Подробнее...