Для начала работы необходимо подключить Bitrix CoreJS расширение ui.vue.vuex Доступно с ui 18.5.1. в вашем компоненте или на php-странице с помощью \Bitrix\Main\UI\Extension::load("ui.vue.vuex");

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

const store = BX.Vuex.store(
{
	state: 
	{
		data: {a: 1, b: 2, c: 3}
	},
	actions: 
	{
		change(store, payload)
		{
			store.commit('changeData', payload);
		}
	},
	mutations: 
	{
		changeData(state, params) 
		{
			if (typeof params.a === 'number')
			{
				state.data.a = params.a;
			}
			if (typeof params.b === 'number')
			{
				state.data.b = params.b;
			}
			if (typeof params.c === 'number')
			{
				state.data.c = params.c;
			}
		}
	}
});

const templateEngine = BX.Vue.create({
	el: this.rootNode.firstChild,
	store: store,
	template: '<bx-root-component/>',
});

Если у вас несколько независимых хранилищ, используйте модульную систему:

const store = BX.Vuex.store(
{
	modules: 
	{
		dataStore1: 
		{
			namespaced: true,
			state: 
			{
				data: {a: 1, b: 2, c: 3}
			},
			actions: 
			{
				change(store, payload)
				{
					store.commit('changeData', payload);
				},
			},
			mutations: 
			{
				changeData(state, params) 
				{
					if (typeof params.a === 'number')
					{
						state.data.a = params.a;
					}
					if (typeof params.b === 'number')
					{
						state.data.b = params.b;
					}
					if (typeof params.c === 'number')
					{
						state.data.c = params.c;
					}
				}
			}
		},
		dataStore2: 
		{
			namespaced: true,
			state: 
			{
				data: {d: 4, e: 5, f: 6}
			},
			actions: 
			{
				change(store, payload)
				{
					store.commit('changeData', payload);
				},
			},
			mutations: 
			{
				changeData(state, params) 
				{
					if (typeof params.d === 'number')
					{
						state.data.d = params.d;
					}
					if (typeof params.e === 'number')
					{
						state.data.e = params.e;
					}
					if (typeof params.f === 'number')
					{
						state.data.f = params.f;
					}
				}
			}
		},
	}
});

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

При выполнении действий (actions) вместо обычного вызова:

store.dispatch('changeData', {a: 11})

Укажите действие вместе с namespace:

store.dispatch('dataStore1/changeData', {a: 11})

При выполнении изменения данных (mutation) вместо обычного вызова:

store.commit('changeData', {b: 22})

Укажите мутацию вместе с namespace:

store.commit('dataStore1/changeData', {a: 22})

Для использования данных хранилища в шаблоне компонентов необходимо, чтобы компонент задекларировал использование этих значений в шаблоне через вычисляемые свойства.

Чтобы вручную не прописывать все элементы структуры, воспользуйтесь вспомогательной функцией mapState:

BX.Vue.component('bx-button-counter', {
            computed:
            {
                counterName(state)
                {
                    return state.data1.c+' шт.';
                },
                ...BX.Vuex.mapState({
                    data1: state => state.dataStore1.data,
                    data2: state => state.dataStore2.data
                })
            },
            template: '<div>Счётчик кликов — {{ counterName }}</div>''
        });

Подробнее об этом можно прочитать в документации. Состояние

Vuex использует единое дерево состояния — когда один объект содержит
всё глобальное состояние приложения и служит «единственным
источником истины». Это также означает, что в приложении будет только
одно такое хранилище. Единое дерево состояния позволяет легко найти
нужную его часть или делать снимки текущего состояния приложения
в целях отладки.

Единое дерево состояния не противоречит модульности — в следующих
главах мы изучим, как можно разделить состояние и мутации на под-модули.

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