fix: ensure loadLottie is called after the component mounted (#527)

* fix: ensure `loadLottie` invoke after `lottieAnimationContainer` is mounted

* refactor: remove unnecessary `nextTick`

packages/vue3-lottie/src/vue3-lottie.vue

@@ -16,7 +16,6 @@ import {
   defineComponent,
   PropType,
   watchEffect,
-  nextTick,
 } from 'vue'
 import Lottie from 'lottie-web'
 import { cloneDeep, isEqual } from 'lodash-es'
@@ -120,6 +119,10 @@ export default defineComponent({
     let direction: AnimationDirection = 1
 
     watchEffect(async () => {
+      // track and ensure that `lottieAnimationContainer` is mounted
+      // fix: #502
+      if(!lottieAnimationContainer.value) return
+
       if (props.animationLink != '') {
         // fetch the animation data from the url
 
@@ -129,22 +132,20 @@ export default defineComponent({
           const responseJSON = await response.json()
 
           animationData.value = responseJSON
-
-          nextTick(() => loadLottie())
         } catch (error) {
           console.error(error)
           return
         }
       } else if (isEqual(props.animationData, {}) === false) {
         // clone the animationData to prevent it from being mutated
         animationData.value = cloneDeep(props.animationData)
-
-        nextTick(() => loadLottie())
       } else {
         throw new Error(
           'You must provide either animationLink or animationData',
         )
       }
+
+      loadLottie()
     })
 
     const loadLottie = () => {