<template>
  <div>
    <input type="text" v-model="userName">
    <div v-for="role in userRoles" :key="role.id">
      <input type="text" v-model="role.name">
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    userName: {
      get() {
        return this.$store.state.users.item.name;
      },
      set(value) {
        this.$store.commit("users/updateUserName", {
          payload: value
        });
      }
    },
    userRoles: {
      get() {
        return this.$store.state.users.item.roles;
      },
      set(value) {
        this.$store.commit("users/updateUserRoles", {
          payload: value
        });
      }
    }
  }
};
</script>