Uncaught TypeError: Cannot read property '$refs' of undefined after router push vueJs

Question

I am working on a vue app and what my function does it to switch it to other page and load a dialog using $refs. However, I keep getting an error "Cannot read property '$refs' of undefined". I know that when router switches pages, it goes to created hook and the refs are not loadded yet. How can I wait till refs are loaded? Below is my code! Thanks in advance!

openUpdateDetails(animalId) {
  this.$router
    .push(
      `/zoo/${
        this.$route.params.id
      }/animal/${animalId}/documents`
    )
    .finally(() => {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs['panel'].$refs['animal-card'].handleAnimalDocument('change_animal');
        });
      });
    });
}

Answer 1

I could not find a way to directly wait for the components to be mounted. But I found other way to do.

beforeRouteEnter(to, from, next) {
next(vm => {
  setTimeout(() => {
      vm.$refs['panel'].$refs['animal-card'].handleNewAmendment('change_animal');
  }, 200);
});

I added this block before computed property of the page I am switching to. Hope this helps other people!