fix: toc correctly reflects headings in a viewport

[Zerro97]

Fix

This fixes #700 by adding deep watch option in useScrollspy.ts:

from

watch(visibleHeadings, (val, oldVal) => {
    if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val }
})

to

watch(visibleHeadings, (val, oldVal) => {
    if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val }
}, { deep: true })

Problem Previously

useScrollspy.ts

While visibleHeadings were correctly updated when it came into a viewport (by chekcing if entry.isIntersecting using IntersectionObserver API), the watch function below did not updated activeHeadings in some circumstances (like when there were no activeHeadings in a viewport)

I tried adding deep option to the watch function and it fixed the problem (might be bad for performance?)

Note

It's my first time contributing to open source. Hope I'm not making any mistakes haha

[vercel]

@Zerro97 is attempting to deploy a commit to the Nuxt Labs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
docus	✅ Ready (Inspect)	Visit Preview	Dec 1, 2022 at 1:12PM (UTC)