VueJS2/Vuex Computed property not behaving as expected - vue.js

Question

I have a datastore with a submodule, both having one variable:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
namespaced: true,
state: {
foo: true,
},
modules: {
secondmodule: {
namespaced: true,
state: {
bar: 0,
},
mutations: {
updateBar: (state, value) => {
state.bar = value;
}
}
}
}
})
In my app, I want to display a snackbar for 2 seconds when the value of foo changes to true:
<template>
<v-app id="example-1">
<router-link :to="{ name: 'secondpage'}">Link</router-link>
{{data.connected}}
{{this.$dataStore.state.foo}}
<main>
<v-fade-transition mode="out-in">
<router-view></router-view>
</v-fade-transition>
</main>
<v-snackbar success top :timeout="2000" v-model="data.connected">
connection established!
</v-snackbar>
</v-app>
</template>
<script type="text/babel">
export default {
computed:{
data() {
return {
connected: this.$dataStore.state.foo,
bar: this.$dataStore.state.secondmodule.bar
}
}
},
};
</script>
Since foo is initialized with true, the snackbar is shown on startup-
Strangely, when I click the link to secondpage, which mutates the bar variable:
created() {
this.$dataStore.commit('secondmodule/updateBar', 1)
}
the snackbar shows up again and I observed that connected quickly changed to false and true again after clicking the link. The value foo is always true and has never changed, so how come the computed property connected changes?
Edit: Since I failed to provide a working fiddle, I added the code here, if anyone would like to take a look at it
https://github.com/netik25/vueProblem