Use $root var for appSettings because vue.prototype vars are not reactive

resources/js/app.js

@@ -8,11 +8,12 @@ import App          from './components/App'
 
 import './components'
 
-Vue.prototype.$appSettings = appSettings
-Vue.prototype.$appVersion = appVersion
-
 const app = new Vue({
     el: '#app',
+    data: {
+        appSettings: window.appSettings,
+        appVersion: window.appVersion
+    },
     components: { App },
     i18n,
     router,

resources/js/components/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div v-if="$appSettings.isDemoApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
+        <div v-if="$root.appSettings.isDemoApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
             {{ $t('commons.demo_do_not_post_sensitive_data') }}
         </div>
         <main class="main-section">

resources/js/components/TwofaccountShow.vue

@@ -42,7 +42,7 @@
 
         computed: {
             displayedOtp() {
-                return appSettings.showTokenAsDot ? this.otp.replace(/[0-9]/g, '●') : this.otp
+                return this.$root.appSettings.showTokenAsDot ? this.otp.replace(/[0-9]/g, '●') : this.otp
             }
         },
 

resources/js/views/auth/Login.vue

@@ -1,13 +1,13 @@
 <template>
     <form-wrapper :title="$t('auth.forms.login')" :fail="fail" :success="success">
-        <div v-if="$appSettings.isDemoApp" class="notification is-info has-text-centered" v-html="$t('auth.forms.welcome_to_demo_app_use_those_credentials')" />
+        <div v-if="$root.appSettings.isDemoApp" class="notification is-info has-text-centered" v-html="$t('auth.forms.welcome_to_demo_app_use_those_credentials')" />
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
             <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
             <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.password')" />
             <form-buttons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" />
         </form>
         <p>{{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link">{{ $t('auth.register') }}</router-link></p>
-        <p v-if="!$appSettings.isDemoApp">{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p>
+        <p v-if="!$root.appSettings.isDemoApp">{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p>
     </form-wrapper>
 </template>
 

resources/js/views/settings/Options.vue

@@ -2,7 +2,7 @@
     <form-wrapper :fail="fail" :success="success">
         <div class="tags has-addons">
             <span class="tag is-dark">2FAuth</span>
-            <span class="tag is-info">v{{ $appVersion }}</span>
+            <span class="tag is-info">v{{ $root.appVersion }}</span>
         </div>
         <form @submit.prevent="handleSubmit" @change="handleSubmit" @keydown="form.onKeydown($event)">
             <form-select :options="options" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')"  :help="$t('settings.forms.language.help')" />
@@ -22,7 +22,7 @@
                 fail: '',
                 form: new Form({
                     lang: this.$root.$i18n.locale,
-                    showTokenAsDot: this.$appSettings.showTokenAsDot,
+                    showTokenAsDot: this.$root.appSettings.showTokenAsDot,
                 }),
                 options: [
                     { text: this.$t('languages.en'), value: 'en' },
@@ -47,7 +47,7 @@
                         this.$router.go()
                     }
                     else {
-                        this.$appSettings = response.data.settings
+                        this.$root.appSettings = response.data.settings
                     }
                 })
                 .catch(error => {