Access element (or ref) in some component from another component

I have a hierarchy of three components like below.

I somehow want to access img element in image component from list component in updateSource method to set original image’s source to whatever value coming as src from updateSource.

I know vuex can be used to declare a state variable which can be used reactively updated and reflect changes in any component. Although, my original intention is to understand the best possible way(s) to access elements across components and what are the best practices involved in doing so.

I had a similar problem and Vuex is the best way. But here is what you could try.

In your list component, emit an event that will be captured by the parent. Have the parent handle the event that triggers a component key change in the image component via a prop. I may have tried this when working on my own problem and I’m not sure how effective it was.

1 Like

This is what worked for me: