Estoy creando un componente secundario para mis filtros que debe actualizarse cuando el usuario cambia algunos valores de entrada... El problema es que cuando emito los nuevos datos en el componente principal, ¡el reloj no se activará! Por favor, revise mi código para ver dónde me equivoqué...
<FiltersComponent v-model:filters="filters" /> watch(filters, (value) => { getAccounts(value); }); const emits = defineEmits(['update:filters']); const props = defineProps({ filters: { type: Object, default: () => ({ ... }), required: true, }, }); function updateFilters(newValue, property) { console.log('updateFilters', newValue, property); emits('update:filters', { ...props.filters, [property]: newValue }); }nota: el archivo console.log imprime el valor nuevo y la propiedad correctamente, ¡pero el reloj nunca sucede!
PD: También utilicé v-on:update:filters="getAccounts(filters)" dentro del componente principal. pero los datos de los filtros no se actualizan dentro de la llamada a la función...
Debe establecer profundo en verdadero al observar una matriz u objeto para que Vue sepa que debe observar los datos anidados en busca de cambios. Intenta usar esto:
watch(filters, (value) => { getAccounts(value); }, { deep: true } );Para referencia, revise la documentación de vue 3: https://v3.vuejs.org/guide/migration/watch.html#_3-x-syntax