Vue.js changes data values by itself - vue.js

Question

This might sound really strange, but it seems Vue decided to change data values by itself. I have a component :is="currentView" tag. I initially set the currentView data to loading and then change it to authenticate later if a condition is met. This works fine. But when a use has authenticated and I change currentView to loading while authenticating the user, it loads for 0.1 seconds and then shows the authenticate component and does that once more, then it shows the component that it should after authenticating. If I log currentView after setting it to loading it logs authenticate and then loading with around 100 milliseconds in between. I can guarantee that I never set currentView to authenticate by myself.
I'm using Nuxt if that matters.
index.vue:
<template>
<div class="container">
<div class="card">
<div class="card-header">
Text
</div>
<div class="card-block text-center">
<component :is="currentView" :user="user">Loading</component>
</div>
</div>
</div>
</template>
<script>
import feathers from 'feathers-client'
import io from 'socket.io-client'
import Authenticate from '../components/Authenticate'
import AfterAuthenticated from '../components/AfterAuthenticated'
import Loading from '../components/Loading'
import config from '../config'
export default {
data () {
return {
currentView: 'loading',
user: {},
feathersClient: feathers()
}
},
components: {
Authenticate,
AfterAuthenticated,
Loading
},
created () {
},
mounted () {
if (this.$route.query.authenticate === 'true') {
this.currentView = 'loading'
this.$router.replace({
path: this.$route.path
})
} else {
this.currentView = 'authenticate'
}
var socket = io(config.BACKEND_URL, { transports: ['websocket'] })
this.feathersClient = feathers()
.configure(feathers.hooks())
.configure(feathers.socketio(socket))
.configure(feathers.authentication({
cookie: 'feathers-jwt'
}))
this.feathersClient.authenticate().then(response => {
this.currentView = 'loading'
return this.feathersClient.passport.verifyJWT(response.accessToken)
}).then(payload => {
return this.feathersClient.service('users').get(payload.userId)
}).then(user => {
this.currentView = 'AfterAuthenticated'
this.feathersClient.set('user', user)
this.user = user
this.$cookies.remove('feathers-jwt')
this.loading = false
}).catch(error => {
console.log(error)
})
}
}
</script>
<style>
input {
border: none;
border-bottom: 2px solid #000000;
background: transparent;
font-size: 20px;
padding: 2px;
transition: border-color 300ms;
color: inherit;
}
input:focus {
border-bottom: 2px solid #0275d8;
outline: none;
}
::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.4);
}
:-moz-placeholder {
color: rgba(0, 0, 0, 0.4);
opacity: 1;
}
::-moz-placeholder {
color: rgba(0, 0, 0, 0.4);
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(0, 0, 0, 0.4);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(0, 0, 0, 0.4);
}
a:visited {
color: #ffffff;
}
.card {
background-color: rgba(255, 255, 255, 0.8);
border-width: 0;
margin: 100px auto;
max-width: 600px;
position: relative;
}
.card-header {
border: 0;
font-size: 24px;
font-weight: bold;
background-color: rgba(4, 22, 40, 0.8);
color: rgba(255, 255, 255, 0.9);
}
.card-title {
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
}
.button {
padding: 0 8px;
font-size: 18px;
font-family: Muli, Helvetica, Arial, sans-serif;
font-weight: normal;
text-align: center;
line-height: 38px;
display: inline-block;
height: 40px;
color: rgba(255, 255, 255, 0.9) !important;
margin-bottom: 0.75%;
}
.rbx-form > p > .button {
border-radius: 10px;
}
.card-text {
margin-top: 1.1em;
}
</style>
Any ideas?
EDIT: Fixed by moving loading component to the Authenticate component and emit an even when the user is authenticated. Still don't know the "real" solution to this though.
EDIT 2: After some testing it was still not working properly. Creating a new project with the webpack template and copying over code made it work perfectly.