title: Toggle v-if variable inside created() lifecycle method in VUE 3 framework
body: <p>I have a component, where there are 3 buttons. 2 are visible initially</p>
  <pre><code>&lt;template&gt;
    &lt;button v-show=&quot;!showLogout&quot; @click=&quot;login('google', 'profile, email')&quot;&gt;
      Google
    &lt;/button&gt;
  
    &lt;button v-show=&quot;!showLogout&quot; @click=&quot;login('facebook', 'email')&quot;&gt;
      Facebook
    &lt;/button&gt;
  
    &lt;button v-show=&quot;showLogout&quot; @click=&quot;logout()&quot;&gt;
      Log out
    &lt;/button&gt;
  
  &lt;/template&gt;.
  </code></pre>
  <p>Then I have an data variable inside data()</p>
  <pre><code>data() {
  return {
    showLogout: false
  }
  </code></pre>
  <p>In setup I bring in the HelloJS and in created() I add a listener where I toggle the variable</p>
  <pre><code> setup() {
      return { hello }
    },
  
  
  
   created() {
      hello.on('auth.login', function(auth) {
        this.showLogout = true
      })
    }
  </code></pre>
  <p>But it's not rerendering the buttons (hiding google and facebook and showing logout).</p>
  <p>How to get it to work like this?</p>