Fix MultiSelect usage

dashboard/src/components/GroupDialog.vue

@@ -95,12 +95,12 @@ defineExpose({
         <FormGroup>
           <label for="usersInput">{{ $t('users.group.users') }}</label>
           <div v-if="group?.source"><span ng-repeat="user in groupEdit.selectedUsers"> {{ (user.username || user.email) }}</span></div>
-          <MultiSelect v-else v-model="users" :options="allUsers" :search-threshold="20"/>
+          <MultiSelect v-else v-model="users" :options="allUsers" option-key="id" :search-threshold="20"/>
         </FormGroup>
 
         <FormGroup>
           <label for="appsInput">Access to Apps</label>
-          <MultiSelect v-model="apps" :options="allApps" :search-threshold="20"/>
+          <MultiSelect v-model="apps" :options="allApps" option-key="id" :search-threshold="20"/>
         </FormGroup>
       </fieldset>
     </form>

dashboard/src/components/UserDialog.vue

@@ -276,7 +276,7 @@ defineExpose({
         <FormGroup>
           <label for="groupsInput">{{ $t('users.user.groups') }}</label>
           <div v-if="allGroups.length === 0">{{ $t('users.user.noGroups') }}</div>
-          <MultiSelect v-if="allLocalGroups.length" v-model="localGroups" :options="allLocalGroups" :search-threshold="20" />
+          <MultiSelect v-if="allLocalGroups.length" v-model="localGroups" option-key="id" :options="allLocalGroups" :search-threshold="20" />
         </FormGroup>
 
         <Checkbox v-model="active" :disabled="isSelf" :label="$t('users.user.activeCheckbox')" style="display: inline-flex; margin-right: 6px;" /><sup><a href="https://docs.cloudron.io/user-management/#disable-user" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup><br/>