title: Vuex: [Vue warn]: Computed property "username" was assigned to but it has no setter
body: <p>I am attempting to set and get a username, password, and an authentication boolean from the global vuex state and conditionally render some elements in a navbar. Here is the login component which should pass the data:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="login" id="login"&gt;
      &lt;b-form-input
        id="inputfield"
        v-model="username"
        type="text"
        placeholder="username"&gt;
      &lt;/b-form-input&gt;
      &lt;b-form-input
        id="inputfield"
        type="password"
        v-model="password"
        placeholder="password"&gt;
      &lt;/b-form-input&gt;
      &lt;b-button @click="login()" id = "inputfield" variant="outline-success"&gt;
        Login
      &lt;/b-button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'login',
      computed: {
        username () {
          return this.$store.state.username
        },
        password () {
          return this.$store.state.password
        },
        loggedIn () {
          return this.$store.state.loggedIn
        }
      },
      methods: {
        login () {
          this.$store.dispatch('login', {
            username: this.username,
            password: this.password,
            isAuthed: true // just to test
          })
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>However, when i enter anything in the input fields, Vue throws a warning for that field(and the state will not update):</p>
  
  <pre><code>[Vue warn]: Computed property "username" was assigned to but it has no setter.
  </code></pre>