Vue is not a constructor возникло при переходе на VUE 3?

Question

Tereverda @Tereverda

Vue.js

Vue is not a constructor возникло при переходе на VUE 3?

На vue 2, все работало корректно, теперь не понимаю в чем проблема.

Ошибка: Uncaught TypeError: Vue is not a constructor
at box.js:1:9

Живой пример

Подключая через CDN

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

Vue.createApp({
  delimiters: ['[%', '%]'],
  data () {
    return {
      // Данные из формы
      length: '',
      width: '',
      height: '',
      quantity: '',
      pickup: 'true', 
      fias: '',
      fefco: '0201',

      // Служебные переменные
      errors: [],
      alert: '',
      error_length: '',
      error_width: '',
      error_height: '',
      error_quantity: '',
    }

  },
  methods: {
    checkForm: function (e) {
      // Проверка на пустые значения
      if (this.length && this.width && this.height && this.quantity) {
        return true;
      } else {
        this.errors = [];
      }

      // Проверка на ошибки
      if (!this.length) {
        this.errors.push('Требуется указать длину коробки');
        this.error_length = true;
      } else if (this.length < 20) {
        this.errors.push('Слишком маленькая длина, возможно вы ввели см., нужно в мм.');
        this.error_length = true;
      } else if (this.length < this.width) {
        this.errors.push('Ширина должна быть меньше длины, поменяйте местами');
        this.error_length = true;
      } else {
        this.error_length = false;
      }

      if (!this.width) {
        this.errors.push('Требуется указать ширину коробки');
        this.error_width = true;
      } else if (this.width < 20) {
        this.errors.push('Слишком маленькая ширина, возможно вы ввели см., нужно в мм.');
        this.error_width = true;
      } else {
        this.error_width = false;
      }

      if (!this.height) {
        this.errors.push('Требуется указать высоту коробки');
        this.error_height = true;
      } else if (this.height < 20) {
        this.errors.push('Слишком маленькая высота, возможно вы ввели см., нужно в мм.');
        this.error_height = true;
      } else {
        this.error_height = false;
      }

      if (!this.quantity) {
        this.errors.push('Требуется указать количество коробок');
        this.error_quantity = true;
      } else {
        this.error_quantity = false;
      }


      // Обложка текста
      if (this.errors.length == 0) {
        this.alert = false;
      } else {
        this.alert = true;
      }

      // Отмена отправки формы
      e.preventDefault();
    }
  },
  mounted: function () {
    // Заполняем форму данными из Twig
    if (this.$refs.length) {
      this.length = this.$refs.length.getAttribute('data-length');
    }
    if (this.$refs.width) {
      this.width = this.$refs.width.getAttribute('data-width');
    }
    if (this.$refs.height) {
      this.height = this.$refs.height.getAttribute('data-height');
    }
    if (this.$refs.quantity) {
      this.quantity = this.$refs.quantity.getAttribute('data-quantity');
    }
    if (this.$refs.pickup) {
      this.fias = this.$refs.pickup.getAttribute('data-pickup');

      // Устанавливаем переключатель - для формы обновить расчет
      if (this.fias == "samovyvoz") {
        this.pickup = true;
      } else {
        this.pickup = false;
      }
    }
  }
}).mount('#app');