Refactor SelectMulti component

src/components/SelectMulti.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-
+import { ref } from 'vue'
-import { ref } from 'vue';
+import { TagsInput } from '@flavorly/vanilla-components'
-import { TagsInput } from '@flavorly/vanilla-components';
 // import Multiselect from '@vueform/multiselect';
 interface Tags {
   id: number
-  value: string,
+  value: string
   label: string
 }
 
@@ -28,18 +27,28 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['update:tags'])
+
 const allowed = ref(props.tags.map((tag) => tag.label))
 const tags = ref<string[]>([])
 
 const updateTags = (value: string[]) => {
   tags.value = value
+  emit('update:tags', value)
 }
 </script>
 
 <template>
   <div class="flex flex-col">
-    <TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed"
+    <TagsInput
-      valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" />
+      v-model="tags"
+      :placeholder="tags.length == 0 ? placeholder : props.label"
+      :allowed-options="allowed"
+      valueAttribute="id"
+      textAttribute="label"
+      :enabled="false"
+      @update:modelValue="updateTags"
+    />
 
     <!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
       :create-option="true" :options="props.tags" :classes="{
@@ -116,4 +125,4 @@ const updateTags = (value: string[]) => {
       spacer: 'box-content'
     }" /> -->
   </div>
-</template>
+</template>