fix issues related to select component after vue3 upgrade

shell/components/auth/AllowedPrincipals.vue

@@ -4,7 +4,6 @@ import ArrayList from '@shell/components/form/ArrayList';
 import Principal from '@shell/components/auth/Principal';
 import SelectPrincipal from '@shell/components/auth/SelectPrincipal';
 import { _EDIT } from '@shell/config/query-params';
-import { addObject } from '@shell/utils/array';
 
 export default {
   components: {
@@ -56,7 +55,11 @@ export default {
 
   methods: {
     addPrincipal(id) {
-      addObject(this.authConfig.allowedPrincipalIds, id);
+      const currentIds = this.authConfig.allowedPrincipalIds;
+      // add new id and remove duplicates
+      const updatedIds = [...new Set([...currentIds, id])];
+
+      this.authConfig.allowedPrincipalIds = updatedIds;
     },
   }
 };

shell/components/auth/SelectPrincipal.vue

@@ -188,7 +188,7 @@ export default {
     :filterable="false"
     class="select-principal"
     :class="{'retain-selection': retainSelection}"
-    @input="add"
+    @update:value="add"
     @search="onSearch"
     @on-open="resetTooltipContent()"
     @on-close="setTooltipContent()"

shell/components/form/LabeledSelect.vue

@@ -13,6 +13,8 @@ import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSe
 export default {
   name: 'LabeledSelect',
 
+  inheritAttrs: false,
+
   components: { LabeledTooltip },
   mixins:     [
     CompactInput,
@@ -245,6 +247,7 @@ export default {
 
 <template>
   <div
+    v-bind="$attrs"
     ref="select"
     class="labeled-select"
     :class="{