title: vueJS [Vue warn]: The computed property "title" is already defined in data
body: <pre><code>&lt;script&gt;
  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: '...'});
          },
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>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? </p>
  
  <p>So if I override this. I get some error like:</p>
  
  <p>[Vue warn]: The computed property "title" is already defined in data.<br>
  [Vue warn]: The computed property "show" is already defined in data.<br>
  [Vue warn]: The computed property "type" is already defined in data.<br>
  [Vue warn]: The computed property "msg" is already defined in data.</p>
  
  <p>How can i resolve this.</p>
  
  <p>Thanks in advance.</p>