Vue JS data availability among components

I've just stared playing with vueJS inside a laravel app.

I am trying to create a steps wizard and I'm having trouble accessing data from the vue definition inside one of the components.

I have:

new Vue({
    el: '#app',

data: {
    currentstep : 1,
    ...
    chosenName: "",

And I would like to be able to access chosenName inside Vue.component('step-controls', {

so that

<button class="btn btn-primary" v-on:click="nextStep()" :disabled="secondstep" v-if="firststep != true && laststep != true">Next</button>

Would be disabled if the value of chosenName is empty string

I would have imagined that it should be something like :

 secondstep: function() {
      return (this.currentstep == 2 && this.chosenName =='')
 },

but chosenName is not one of the props. If I am adding it to the props array, how do I keep it in sync?

Link to fiddle: http://ift.tt/2lqENhz

via Chebli Mohamed