<script>
	// предварительно добавляем параметры pen'у
	const url = new URL(location);
	url.searchParams.append('length', 123);
	url.searchParams.append('width', 345);
	url.searchParams.append('height', 678);
	history.replaceState({},'', url);
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

<div id="app">
	<pre>
length: {{length}}
width: {{width}}
height: {{height}}

watchUpdateCount: {{watchUpdateCount}}
watchUpdateQueryLog: {{watchUpdateQueryLog}}
	</pre>
</div>

<script>
	const app = Vue.createApp({
		data () {
			return {
				// Данные из формы в мм.
				length: this.$route.query.length, // пусто, весь массив query
				watchUpdateCount: 0,
				watchUpdateQueryLog: {},
			}
		}, 
		// Подумал, что во VUE 2 роутер добавлялся как свойство, а здесь в конце после создания объекта
		mounted: function () {
			this.$watch(() => this.$route, (x) => {
				this.length = this.$route.query.length;
				this.width = this.$route.query.width;
				this.height = this.$route.query.height;
				
				this.watchUpdateCount++;
				this.watchUpdateQueryLog[`${
					this.watchUpdateCount
				}: ${
					new Date().toISOString()
				}`] = {...this.$route.query};
				
			}, {deep: true, immediate: true});
		}
	});

	// VueRouter
	const router = VueRouter.createRouter({
		history: VueRouter.createWebHistory(), // раньше был мод хистори, вроде бы это его новый аналог
		routes: []
	});

	app.use(router);
	app.mount('#app');
</script>