How to re-render a vue component?

Question

Vue.js

I have a Header.vue component that contains the site header.

<div class="main_menu__auth l-ml-10 lm-ml-10" ref="map">
                    <div v-if="authdata == null" class="main_menu__auth__login l-fs-15 main_menu__auth__login--shown">
                        <i class="far fa-user-circle  l-fs-20 icon icon--signin"></i>
                        <span class="l-ml-10 lm-hidden">Войти</span>
                    </div>
                    <div v-else>
                        {{authdata.name}} |
                        <button @click="exit">Выход</button>
                    </div>
                </div>

Authdata is passed to this header (component) (if the authdata array is empty, then the user is not authorized), and if it is not empty, then it is authorized. Let's say I logged in and refreshed the page, the login and logout button will appear in the header, if I click on the logout button, a logout request will be sent (the user will become unauthorized), after this request I reset authdata . The question is, how do I redraw (update) the dom so that instead of the login and exit button, the login button appears?

export default {
        data:function(){
            return{
            }
        },
        props:[
            'authdata'
        ],

        mounted(){
          this.update()
        },
        watch:{

        },
        methods:{
            update: function () {
                console.log(this.authdata)
            },
            exit:function () {

                $.ajax({
                    url: "/exit",
                    type: "GET",
                    data: "get=on",
                    success: function (response) {
                        console.log('Нажал на выход'+response);
                        this.authdata = null;
                        console.log(this.authdata);
                    }
                });
            }
        }
    }

just started learning vue.

Answer 1

You seem to be doing everything right, but:

exit:function () {
let t = this; // вам нужно передать внутрь правильный контекст
         $.ajax({
              url: "/exit",
              type: "GET",
              data: "get=on",
              success: function (response) {
                        console.log('Нажал на выход'+response);
                        t.authdata = null; //  внимание! this здесь уже не тот! :)
                        console.log( t.authdata);
                    }
                });
            }

Answer 2

Incoming properties cannot be nulled from a component. You should have an error in the console saying that you can't do that.
For things like this, use vuex to push the data globally.