Upon encountering a similar issue, I stumbled upon this very discussion. To benefit future generations, it's worth noting that the top-voted answer suggests binding "this" to a variable to prevent changing the context when calling the function within setTimeout.

For a more recommended approach (using Vue.JS 2.2 & ES6), consider utilizing an arrow function to bind the context to the parent. In essence, both "addToBasket"'s "this" and the "setTimeout"'s "this" would still refer to the same object:

addToBasket: function(){
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        setTimeout(() => {
            this.basketAddSuccess = false;
        }, 2000);
    }

Include bind(this) in the setTimeout callback function to ensure proper execution

setTimeout(function () {
    this.verifyLogin = true
}.bind(this), 3000)

Using ES6 allows for binding 'this'

setTimeout(() => {

 },5000);

In the realm of answers, Kevin Muchwat stands out as the shining star, despite receiving only 10 upvotes and not being the chosen answer.

setTimeout(function () {
    this.basketAddSuccess = false
}.bind(this), 2000)

Let me elaborate on WHY.

The use of "Arrow Function" falls within the ECMA6/ECMA2015 standards. While it may work seamlessly in compiled code or controlled client environments such as cordova phone apps and Node.js, it's worth noting that Microsoft, in their infinite wisdom, has irrevocably decided to refrain Internet Explorer from ever supporting ECMA2015!

Although their new Edge browser does support it, sadly, relying solely on that is not viable for public-facing websites.

Opting for a standard function(){} approach coupled with .bind(this) embodies the essence of ECMA5.1 (which enjoys full support). This alternative syntax offers the same functionality in a more compatible manner.

This distinction becomes crucial in scenarios involving ajax/post .then/else calls. In those instances, remember to incorporate .bind(this) at the closure of your .then(function){} like so: .then(function(){this.flag = true}.bind(this))

I contemplated adding this insight as a comment to Kevin's original response; alas, the system dictates stricter criteria for commenting than for replying.

A word of caution - I implore you NOT to repeat the mistake I made! Hailing from Mac territory, I initially embraced the arrow syntax after witnessing a whopping 48-point endorsement. All seemed well until my scripts started floundering inexplicably. The silver lining was rediscovering this thread and heeding Kevin's advice promptly.

Kudos to Kevin for his sagacity; I am indebted to him eternally.

Regarding the purported "Accepted answer", one must tread cautiously due to potential complications arising from interfacing with additional libraries (particularly challenges pertaining to accessing/updating Vue properties/functions).

Learn Vue.js version 2

To begin, insert the following code into your methods section:

methods:{
    sayHello: function () {
      var vm = this;
      setTimeout(function () {
        vm.greeting = "Hello Vue!";
    }, 3000);
   }

Next, make sure to call this method when the component is mounted:

mounted () {
  this.sayHello()
}

One helpful method is Vue.nextTick

addToCart: function(){
                product = this.item;
                this.$http.post('/api/order/addToCart', product);
                this.cartAddSuccess = true;
                Vue.nextTick(() =>{
                    this.cartAddSuccess = false;
                });
            }

Avoid using bind(this) with arrow functions:

  setTimeout( ()=> {
    // your code here
   }, 500)

Utilizing Arrow Functions

An efficient solution to this issue involves utilizing arrow functions () => {}:

    addToBasket() {
        var item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        // The use of arrow function maintains the correct reference for 'this'
        setTimeout(() => this.basketAddSuccess = false, 2000);
    }

This approach works because with arrow functions, the this is bound to the this of its surrounding scope. In the context of Vue, that refers to the parent or enclosing component. On the other hand, when using a traditional function within setTimeout, this points to the global window object, leading to errors when attempting to access this.basketAddSuccess.

Alternative Approach: Argument Passing

Another method to tackle this problem is by passing this as an argument to your function through the prototype of setTimeout in its

setTimeout(callback, delay, arg1, arg2, ...)

    addToBasket() {
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        //Include scope argument in function and pass 'this' after the specified delay in setTimeout
        setTimeout(function(scope) {
             scope.basketAddSuccess = false;
        }, 2000, this);
    }

(It's important to note that the syntax for argument passing is not compatible with IE 9 and earlier versions.)

To incorporate the this keyword within your function, it is essential to implement the setTimeout function using ES6 syntax.

setTimeout(() => {
   this.filters.max_budget_gt_eq = this.budgetHigherValue;
}, 1000);

Remember to utilize this.animationStop instead of using this.animationStop ( )

animationRun(){
    this.sliderClass.anim = true;
    setTimeout(this.animationStop, 500);
},

It seems that there may be a scope problem at play. Consider using the code below instead:

addToCart: function(){
    selectedProduct = this.itemToAdd;
    this.$http.post('/api/cart/addToCart', selectedProduct);
    this.cartAddSuccess = true;
    var self = this;
    setTimeout(function(){
        self.cartAddSuccess = false;
    }, 2000);
}