fix: visibility variants not triggered when visible on load

[BobbieGoede]

Issues

• Resolves Could we make *-visible directives work when the element is visible from the start? #29 (tested with provided reproduction)
• Unclear, possibly Animations not completing in Chromium browsers #71
• Resolves the Target element doesn't appear after adding :visible directive #98 (tested with provided reproduction)
• Resolves Animation not working if using :visibleOnce #103
• Unclear, possibly VisibleOnce Visibility Variant does not work with Nuxt3 SSR / Nuxt Link #134
• Resolves Issue with "visible" / "visible-once" variant #143
• Resolves Elements won't appear. #153

This should fix visibility variants not being triggered when the element should already be visible on page load. It's a bit of a head scratcher, but I think this issue may be exclusive to directive usage (not when using <Motion />).

I'm assuming that useIntersectionObserver doesn't play nice when called in created simply based on v-intersection-observer directive using the mounted hook in @vueuse/components (see source here).

Unfortunately I wasn't able to add a test for this, maybe intersection observer doesn't work in happy-dom? If anyone knows how to properly test this behaviour and could give me pointers on how to do so I would feel a lot better about this fix 😅..

[BobbieGoede]

@cpreston321 and/or @Tahul
Pinging to request review 😅 (can't assign reviewers)