title: Maintain associated objects in Vue
body: <p>I'm new to vue, but I carefully read the docs for vue and vuex as well. But I'm stuck with the following issue. I also do think it's neither that I would not get it done somehow, but I'd like to go for a clean and probaply best practive approach.</p>
  
  <p>The Setup:
  - I have some entities
  - I have some users
  - lets say an entity can belong to multiple users</p>
  
  <p>Now what I want to accomplish is to display a list of all users having those checked which are assigned to the entity.</p>
  
  <p>I have the following vuex store:</p>
  
  <pre><code>export default new Vuex.Store({
      state: {
          users: [],
          entities: []
      },
      getters: {
          USERS: state =&gt; state.users,
          ENTITIES: state =&gt; state.entities,
          ENTITY: state =&gt; id =&gt; {
              return state.entities.find(entity =&gt; entity.id == id)
          }
      },
      mutations: {
          SET_USERS: (state, payload) =&gt; {
              state.users = payload
          },
          SET_ENTITIES: (state, payload) =&gt; {
              state.entities = payload
          },
          UPDATE_DEVICE: (state, payload) =&gt; {
              state.entities = state.entities.map(entity =&gt; {
                  if(entity.id === payload.id){
                      return Object.assign({}, entity, payload.data)
                  }
                  return entity
              })
          }
      },
      actions: {
          GET_USERS: async (context) =&gt; {
              let { data } = await Axios.get('/api/v1/users')
              context.commit('SET_USERS', data)
          },
          GET_ENTITIES: async (context) =&gt; {
              let { data } = await Axios.get('/api/v1/entities')
              context.commit('SET_ENTITIES', data)
          },
          UPDATE_ENTITY: ({commit}, payload) =&gt; {
              Axios.put('/api/v1/entities/' + payload.id + '/', payload.data).then((response) =&gt; {
                  commit('UPDATE_ENTITY', payload)
              });
          }
      }
  })
  
  </code></pre>
  
  <p>My Entity-Component loads the users from the store within the created hook. The the entity's data is get from the store from the computed property <code>entity()</code>. Also the list of all users is served by a computed property <code>users()</code>.</p>
  
  <pre><code>created(){
     if(!this.$store.getters.USERS.length) this.$store.dispatch('GET_USERS')
  },
  computed: {
     entity(){
        const entityId = this.$route.params.id
        return this.$store.getters.ENTITY(entityId)
     },
     users(){
        return this.$store.getters.USERS
     }
  }
  </code></pre>
  
  <p>Then within the template I show all the users and a checkbox:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li v-for="(user, i) in users" :key="i"&gt;
        &lt;input type="checkbox" :value="user" :id="'user_'+i" :name="'user_'+i" v-model="???" /&gt;
        &lt;label :for="'user_'+i"&gt;{{user.name}}&lt;/label&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I also have a second list of all users which belong to the entity within the the same component's template like the following which I'd like to keep in sync with the 'selectable list'. So all users with a checked checkbox should be listed in that list:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li v-for="user in entity.users" :key="user.id"&gt;
        {{user.name}}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is where I'm stuck at:
  should I use a computed property for the device.users with get() and set() and use this as v-model on the checkboxes? I tried that but it hasn't worked because the user object of the all-users list and the objects of the device.users list were not the same objects even if they represent the same user. And at that point I think I'm doing the whole thing way to complex and I'm simply overlooking the common way practiced vue-users would do it.</p>
  
  <p>So long story short: what is the best way to solve this task? 
  I think it's a mostly common task.</p>
  
  <p>Thanks for every answer, if more code / details required I of cause will provide them!</p>