Vue.js component only updating after browser page refresh

Question

So I am still quite new to Vue.js or any reactive framework for that matter.

I have a component that I need to have update whenever a change is made. The idea is that it is taking a balance from a specific login.

<li :key="balance">Balance {{ balance }}</li>

data() {
    return {
      games: [],
      balance: '101',
      error: ''
    }
}

async created() {
    try{
      this.balance = await WalletService.getBalance();
    } catch(err){
      console.log(err.message);
    }
  }

From my own debugging, it looks like the created() function is not being called after my router.push() when the user logs in. How can I ensure that created() is called after router.push

Answer 1

Remove the async keyword from created() .

Although lifecycle methods can perform asynchronous code, the lifecycle itself is synchronous.