title: VueJS: v-model on <span> element ? How to handle that?
body: <p>I have this simple component displaying user info:</p>
  
  <pre><code>&lt;div class="m-card-user__details"&gt;
    &lt;span class="m-card-user__name m--font-weight-500"&gt;
      {{ firstname }} {{ lastname }}
    &lt;/span&gt;
    &lt;a class="m-card-user__email m--font-weight-300 m-link"&gt;
      {{ loginEmail }}
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>&lt;script&gt;
  export default {
    data () {
      return {
        loginEmail : this.$store.getters.user.loginEmail,
        firstname: this.$store.getters.user.firstName,
        lastname: this.$store.getters.user.lastName,
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Problem is that if another component change the value of the firstname property in the VueX store, I see that the value is well updated on the store but not on my component here..</p>
  
  <p>How can i set the 2 ways bindings on a  element ?</p>