javascript - How to auto update data in vuejs model from global object? -

this first project vuejs , have problem auto update data global object. in project i'm using es6 , vuejs.

i need disabled/enabled button , when changing disabled option in global object false button is't enable.

here simple fiddle https://fiddle.jshell.net/daer/nsk95tez/

when click "change state" state.disabled changing false button is't enable :(

<div id="some">   <p>current state: {{disabled}}</p>   <button type="button" v-bind:disabled="disabled">button</button> </div> <br> <button id="state" type="button" v-on:click="changestate">change state</button>  class statelist {     constructor() {         this.disabled = true;     } }; // export default (new statelist);   // import state '../state/'; var state = new statelist;  var = new vue({   el: '#some',   data: {     disabled: state.disabled   },   methods: {     methodone: function(e) {       // ...     }   } });  var changestate = new vue({   el: '#state',   methods: {     changestate: function(e) {       state.disabled = false;       alert(state.disabled);     }   } }); 

the problem not changing variable data.disabled button state isn't changing. creating data object , state object , copying 1 value data.disabled=state.disabled between them @ creation of vue instance (your not passing reference variable variable itself). need set state object data object.

el: '#some', data: state, methods: { 

https://fiddle.jshell.net/nsk95tez/2/

however don't need es6 class store state. 1 of key parts vue.js data variable simple object. es6 class syntactic sugar creating objects inheritance don't need in scenario.

try this

var state = {disable:true}; 

https://fiddle.jshell.net/nsk95tez/1/ here modified js fiddle example.