vueJS [Vue warn]: The computed property "title" is already defined in data - vuejs2

Question

<script>
import alertStore from '../stores/alert';
Vue.component('alert', require('vue-strap').alert);
export default {
data () {
return {
show: alertStore.state.show,
title: alertStore.state.title,
msg: alertStore.state.msg,
type: alertStore.state.type
}
},
created () {
},
computed: {
title () {
return alertStore.state.title;
},
msg () {
return alertStore.state.msg;
},
type () {
return alertStore.state.type;
},
show () {
return alertStore.state.show;
},
duration () {
return alertStore.state.duration;
}
},
methods: {
dismissAlert: function () {
this.$store.dispatch('dismissAlert', {title: '...'});
},
}
}
How does the namespace work in Vue? Is both data keys, computed return object keys, and all components object keys will be added to the this instance?
So if I override this. I get some error like:
[Vue warn]: The computed property "title" is already defined in data.
[Vue warn]: The computed property "show" is already defined in data.
[Vue warn]: The computed property "type" is already defined in data.
[Vue warn]: The computed property "msg" is already defined in data.
How can i resolve this.
Thanks in advance.

Answer 1

Vue binds all properties in the data method to the root of the instance. It also does this for computed properties, and methods, so you must use different names to avoid naming conflicts.
The main problem in the code you posted is that you have naming conflicts with every data property. In fact, because you are using a Vuex store, you don't need the data properties at all, just the computed properties.
This is also not the best way to use Vuex stores. The general recommendation is to use mapGetters as documents here.

Answer 2

<style lang="sass" scoped>
#import '../../sass/_variables.scss';
.dismiss {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
padding: 10px;
margin: 10px;
}
.alert {
width: 40%;
border-radius: 0;
border-width: 5px;
margin: 10px;
.row {
margin: 0;
.header {
font-size: 1.25em;
font-weight: 800;
}
}
}
</style>
<template>
<div>
<alert class='card' v-show="show" placement="top" :duration="duration" :type="type">
<div class="row">
<div class="header">
{{ title }}
</div>
<div class='message'>
{{ msg }}
</div>
</div>
<div class="dismiss" title="Click to dismiss" #click="dismissAlert">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</alert>
</div>
</template>
<script>
import alertStore from '../stores/alert';
Vue.component('alert', require('vue-strap').alert);
export default {
data () {
return {
show: alertStore.state.show,
title: alertStore.state.title,
msg: alertStore.state.msg,
type: alertStore.state.type
}
},
created () {
},
computed: {
title () {
return alertStore.state.title;
},
msg () {
return alertStore.state.msg;
},
type () {
return alertStore.state.type;
},
show () {
return alertStore.state.show;
},
duration () {
return alertStore.state.duration;
}
},
methods: {
dismissAlert: function () {
this.$store.dispatch('dismissAlert', {title: '...'});
},
}
}
</script>
This is my template code