Why doesn't vuejs bind the data?

Question

Vue.js

I use vueify + browserify. There are no errors in consoles. Just doesn't render {{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>

Main instance:

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

What am I doing wrong?
#v-steplist exists. In it, the component is rendered with an empty h3
UPD
solved the problem by declaring the data in the Vue instance and explicitly binding it to the component.
The right piece of docks
helped . In fact, I initially approached the structure incorrectly. The data needs to be passed from the root.

Answer 1

try to be more precise. https://codesandbox.io/s/jz6nyvnl1v
I don't know if browserify can import ES6, but it won't take long to fix.