<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>