I am facing a challenge with integrating a Vue component into a large legacy system that is not based on Vue. This component retrieves data through AJAX requests and displays information based on an array of database record IDs, typically passed at page load time by the server directly embedded in the template as props like this:
let config = {
records: {{ template_code_outputting_array }},
...otherConfigOptions
}
let app = new Vue({
el: '#app',
store,
render: h => h(ComponentName, {
props: config
})
})
However, I encountered an issue when trying to embed the component in a screen where users can dynamically select database records using a search-and-add AJAX interface. The challenge is keeping the component in sync with the user's selections so it can be updated accordingly.
Currently, my solution involves calling a method directly on the component every time there's a change in user selection, passing the new selection to update the internal copy:
app.$children[0].recordsChanged(newSelection)
While this works, I feel it is not ideal as it lacks reactivity and seems like a hacky approach. I believe directly addressing a component in this manner is not recommended, especially considering that the function being called is for external use only and not used internally within the component.
I have attempted binding values in data to global variables, although imperfect, given the circumstances, but adding a watch method has not triggered the necessary re-render upon changes. Scalar values do not react due to their pass-by-value nature, and even wrapping them in an object did not lead to the expected reactivity.
Is there a best practice or better way to achieve this functionality, or perhaps my current approach is the most feasible solution?