Estoy usando la biblioteca Vue-Select con Vue3. Mi objetivo es permitir que el usuario elija etiquetas de una lista de opciones y también poder crear nuevas etiquetas si las etiquetas no existen en la lista de opciones.

Esto funciona bien en un componente secundario, pero tengo problemas para pasar/emitir los datos al componente principal. Necesito los datos en el padre porque voy a empaquetarlos para procesarlos más adelante.

¿Cómo puedo obtener con éxito las etiquetas del componente secundario y en la propiedad formData.tags del componente principal?

El código y el enlace de sandbox :

components/PostEditorTags.vue :

 <template> <v-select :create-option="(tag) => ({ label: tag, value: tag })" v-model="selected" :options="options" multiple taggable @input="$emit('input', selected)" placeholder="add a tag" ></v-select> <br /> child component data: <pre>{{ selected }}</pre> </template> <script setup> import { ref } from 'vue'; import vSelect from 'vue-select'; import 'vue-select/dist/vue-select.css'; defineEmits(['input']); const options = [ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'three', label: 'Three' }, { value: 'four', label: 'Four' }, { value: 'five', label: 'Five' }, { value: 'six', label: 'Six' }, { value: 'seven', label: 'Seven' }, { value: 'eight', label: 'Eight' }, { value: 'nine', label: 'Nine' }, { value: 'ten', label: 'Ten' }, ]; let selected = ref([]); </script>

components/Parent.vue:

 <template> <h1>Post Tags</h1> <PostEditorTags @input="setTagsArr" /> <br /> <br /> parent component data: <pre>{{ formData.tags }}</pre> </template> <script setup> import PostEditorTags from './PostEditorTags.vue'; const formData = { // title: '', // content: '', tags: null, }; function setTagsArr(x) { formData.tags = x; } </script>