I recently started using Vue and came across an interesting behavior that I wanted to clarify. I have a component that receives a list of facets and organizes them for display purposes. Here is a snippet of the code:
// Code snippet
The above code showcases how my component, named Chooser, handles the facets array and includes logic for expanding/collapsing items, adding filters, and emitting events.
The getFacets method defined in another file processes the facets data and returns a format suitable for display in the component:
// Code snippet
In this particular component, clicking on an item triggers a search operation which fetches a new set of facets. Below is an example of how the updated array looks like after a search:
// Updated array after search
These operations are facilitated by a parent component where the initial facets array is loaded at page load and updates are triggered upon user interaction. However, despite observing changes in the facets array within the parent component, the Chooser component does not reflect these changes. Are there specific steps or methods I should implement to ensure that the Chooser updates accordingly?