Почему vuejs не биндит данные?

Question

[Никита Кит]

Использую vueify + browserify. В консолях ошибок нет. Просто не рендерит {{hello}}

<template>
	<div class="v-steplist">
		<div class="v-steplist__header">
			<h3>{{ hello }}</h3>
			<div class="v-steplist__edit-step"></div>
		</div>
		
		<div class="v-steplist__content">
			<div class="v-steplist__step"></div>
		</div>
	</div>
</template>




<script>
	const Vue = require("vue/dist/vue.js");
	Vue.component("v-steplist",{
		data: function (){
			return {hello: 'greet'}
		}
	})
</script>

Основной экземпляр:

let vueMigrate = function(){
	const Vue = require("vue/dist/vue.js");

	let rootSteplist = document.querySelector("#v-steplist")
	if(rootSteplist){
		new Vue({
			el: '#v-steplist',
			components: {
				vSteplist: require("../_modules/components/vue-components/vue-steplist/steplist.vue")
			}
		})
	}
}
module.exports = vueMigrate

Что я делаю не так?
#v-steplist существует. В нём компонент - рендерится с пустым h3

UPD
решил проблему объявлением данных в экземпляре Vue и явным биндингом в компонент.
Помог нужный кусок доков
На самом деле я изначально неправильно подошёл к структуре. Данные нужно прокидывать от корня.

Comments

[Антон Швец]

https://github.com/vuejs/vue-devtools

[Никита Кит]

Антон, у меня установлено это расширение. Он очень мне ничем не помогло. Как я говорил - ошибок нет

Answer 1

[Антон Швец]

попробуйте оформить все аккуратней. https://codesandbox.io/s/jz6nyvnl1v
Не знаю умеет ли browserify ES6 import, но исправить недолго.

Comments

[Никита Кит]

Там просто оказался нюанс в передаче данных к глобально объявленному компоненту. биндить надо было явно и нужные части данных передавать в props компонента. В UPD ссылка на нужную часть доков об этом

[Антон Швец]

Никита Кит, в вашем примере data было указано в самом компоненте, props тут не причем.
Если вам нужно "прокидывать" данные через цепочку компонентов, то есть смысл использовать Vuex, или другую подсистему хранения данных.