edit readme, prettier, pkg, comment

Author: smastrom

.prettierrc

@@ -7,7 +7,7 @@
 		{
 			"files": "README.md",
 			"options": {
-				"printWidth": 100,
+				"printWidth": 80,
 				"trailingComma": "none",
 				"useTabs": false,
 				"semi": false

README.md

@@ -11,7 +11,9 @@
 The [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is a great API.
 But it may not be the one-size-fits-all solution to highlight menu/sidebar links.
 
-You may noticed that clicking on some links highlights the wrong one (or does nothing) or that the active link doesn't reflect the one in the URL hash. But most important, you noticed that's tricky to obtain different behaviors according to different scroll interactions.
+In some cases, you may noticed that last targets may never intersect and that by clicking on the correspondent links highlights the wrong ones (or does nothing). Same may happen with the URL hash, which in some cases may not reflect the actual active target.
+
+But most important, you noticed that's tricky to customize behavior according to different scroll interactions.
 
 For example, you want to immediately highlight targets when scroll is originated from click but not when scroll is originated from wheel/touch.
 
@@ -97,7 +99,9 @@ const { isActive } = useActive(targets)
 Nuxt Content automatically applies IDs to your headings. You can get the TOC links by accessing `data.body.toc.links` via [queryContent](https://content.nuxtjs.org/api/composables/query-pages/).
 
 ```js
-const { data } = await useAsyncData('about', () => queryContent('/about').findOne())
+const { data } = await useAsyncData('about', () =>
+  queryContent('/about').findOne()
+)
 ```
 
 ```js

package.json

@@ -2,7 +2,7 @@
 	"name": "vue-use-active-scroll",
 	"version": "0.8.8",
 	"private": false,
-	"description": "Reactive and accurate TOC/sidebar links without compromises for Vue.",
+	"description": "Reactive and accurate TOC/sidebar links without compromises for Vue 3.",
 	"keywords": [
 		"vue",
 		"vue3",

src/useScroll.ts

@@ -59,7 +59,7 @@ export function useScroll({ isWindow, root, _setActive, matchMedia }: UseListene
 		}
 	}
 
-	// Restore "updating" functionalities if scrolling again while scrolling from click...
+	// Restore "highlighting" if scrolling again while already scrolling from click...
 	function reScroll() {
 		isClick.value = false;
 	}
@@ -70,6 +70,10 @@ export function useScroll({ isWindow, root, _setActive, matchMedia }: UseListene
 		}
 	}
 
+	function resetReady() {
+		setReady(20);
+	}
+
 	function onPointerDown(event: PointerEvent) {
 		const isLink = (event.target as HTMLElement).tagName === 'A';
 		const hasLink = (event.target as HTMLElement).closest('a');
@@ -114,10 +118,6 @@ export function useScroll({ isWindow, root, _setActive, matchMedia }: UseListene
 		{ immediate: true, flush: 'sync' }
 	);
 
-	function resetReady() {
-		setReady(20);
-	}
-
 	watch(
 		isClick,
 		(_isClick, _, onCleanup) => {