Vue2 $refs empty when DOM element not visible - ajax

Question

I'm trying to play a video with Vue2, and I'm using the following code:
HTML:
<video ref='wave' id='wave' :src='audio.wave'></video>
Then I do an AJAX request to get the URL of the video. I know I have to save "this" in another variable, so use "vm" variable:
var vm=this;
$.post( {blah, blah} ).done(function( response ) {
var json=JSON.parse(response);
console.log(vm.$refs); // outputs empty object
});
When I console.log() "vm.$refs" it displays an empty object:
{}
But, If I manually type the command into the browser console after the $.post request has completed, it contains a reference to my element:
{wave: video#wave}
Any help gratefully received

Answer 1

I assume that you are making the post request in created hook.
An important note about the ref registration timing: because the refs
themselves are created as a result of the render function, you cannot
access them on the initial render - they don’t exist yet!
(from https://v2.vuejs.org/v2/api/#ref)
if you make the post request in mounted hook, the $refs should be ready and you will be able to use it.
or... using nextTick would also solve the issue (if the element will be mounted in the next DOM update cycle.).
var vm = this;
$.post({ blah, blah }).done(function(response) {
var json = JSON.parse(response);
// added
vm.$nextTick(()=>{
console.log(vm.$refs);
});
});