How to access the same ref for multiple elements?

Question

Vue.js

There is a component in which ref is assigned

<video ref="player">
   ...
</video>

This component 1) is used multiple times on 1 page; 2) used on another page
If there are no problems with the first scenario (I believe the view itself recognizes where which ref is from the array), then the second problem is this: when moving from the page where this component was used with ref to another page where the same component is used with with the same ref i get the error

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined

I address so
this.$refs.player.getBoundingClientRect().top
What to do or make in that case?
The usecase is the component that I want to listen to when it appears in the viewport. Can it come from the other side?