Toggle v-if variable inside created() lifecycle method in VUE 3 framework

Question

I have a component, where there are 3 buttons. 2 are visible initially

<template>
  <button v-show="!showLogout" @click="login('google', 'profile, email')">
    Google
  </button>

  <button v-show="!showLogout" @click="login('facebook', 'email')">
    Facebook
  </button>

  <button v-show="showLogout" @click="logout()">
    Log out
  </button>

</template>.

Then I have an data variable inside data()

data() {
return {
  showLogout: false
}

In setup I bring in the HelloJS and in created() I add a listener where I toggle the variable

 setup() {
    return { hello }
  },



 created() {
    hello.on('auth.login', function(auth) {
      this.showLogout = true
    })
  }

But it's not rerendering the buttons (hiding google and facebook and showing logout).

How to get it to work like this?

Answer 1

Just use the setup hook to define your data properties like :

import {ref} from "vue"
...
 setup() {
     const showLogout= ref(false)
   
     hello.on('auth.login', function(auth) {
       showLogout.value = true
    })

    return { showLogout}
  },