text: Q:
  
  Dealing with VueJS Scope
  
  I'm dealing with a scope problem and i can't use the workaround let that = this; I want to change the variable error. Here you are a  CODEPEN Example
  HTML
  <div id="app" class="container">   
      {{error}}
      <br>
      <button type="button" @click="change()">Change Variable Error</button>
  </div>
  
  JS
  var demo = new Vue({
      el: '#demo',
  
      data:{
        error: "a",
        item: {
          foo: function(){
              alert('Change!');
            this.error = "Something went wrong!";
          }
      }
      },
      methods:{
          change(){
          this.item.foo();
        }
      }
  });
  
  Thanks!
  
  A:
  
  It is not vue issue but javascript "THIS" issue. You can get what you want with this code in methods.
  change() {
      this.item.foo.bind(this)();
  }
  
  In function foo, there is this.error. But this this is not bound to vue instance's scope. So, you should bind it on this scope before you call.
  And plus, I don't recommend you to mutate the state in data property. It could be anti-pattern.
  
  