Run watcher post DOM update in Vue adapter

[markjaniczak]

This solves #715

According to the Vue docs; watchers will run their effects after state updates but before DOM updates. The ref attribute performs the same way which is why some users discovered they need to wrap their measureElement calls with nextTick in order to measure elements in a post update state (#619).

Currently the vue adapter will update state pre DOM update which causes an infinite loop if the estimated size of an element doesn't exactly match the measured size. Simply running the effect post DOM update will ensure that the elements are measured and taken into account before virtualizer updates its state.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 70f8dec. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,test:build,build
• nx run-many --targets=test:format,test:sherif,test:knip,test:lib,test:types,test:build,build

---

Sent with 💌 from NxCloud.

[piecyk]

@markjaniczak great thanks 👏 btw not that familiar with vue, why we need the first watch in adapter, this part

virtual/packages/vue-virtual/src/index.ts

Lines 36 to 46 in a42c49a

	watch(
	() => unref(options).getScrollElement(),
	(el) => {
	if (el) {
	virtualizer._willUpdate()
	}
	},
	{
	immediate: true,
	},
	)

isn't it redundant as second one is watch whole options 🤔

[piecyk]

@markjaniczak can you run formatting with pnpm prettier:write

[markjaniczak]

@markjaniczak great thanks 👏 btw not that familiar with vue, why we need the first watch in adapter, this part

virtual/packages/vue-virtual/src/index.ts

Lines 36 to 46 in a42c49a

	watch(
	() => unref(options).getScrollElement(),
	(el) => {
	if (el) {
	virtualizer._willUpdate()
	}
	},
	{
	immediate: true,
	},
	)

isn't it redundant as second one is watch whole options 🤔

I'm not very familiar with Vue either; I'm usually a React guy.

That said, I believe both are still necessary. The first watcher will react to changes of what getScrollElement returns and the second watcher will react to changes of the function's signature (if the function was saved as a vue ref).