Почему не работает двухстороннее связывание после билда?

Question

[kokapuk]

<Modal title="Change password" :show="modalShow">
      <form @submit.prevent="changePassword">
        <input
          @input="() => (changePasswordFormInvalidReason = null)"
          id="current-password"
          v-model="currentPassword"
          class="input mb-15 w-100"
          type="password"
          placeholder="Current password"
          required
          minlength="8" />
        <input
          @input="() => (changePasswordFormInvalidReason = null)"
          id="new-password"
          v-model="newPassword"
          class="input w-100"
          type="password"
          placeholder="New password"
          required
          minlength="8" />
        <span v-if="changePasswordFormInvalidReason" class="d-block mt-10 text-light text-salmon-pink">{{ changePasswordFormInvalidReason }}</span>
        <div class="right mt-25">
          <button type="submit" class="button sea-green ms-10">Save</button>
          <button type="button" @click="() => (modalShow = false)" class="button">Cancel</button>
        </div>
      </form>
    </Modal>

<script>
import Alarm from '../assets/alarm.mp3';
import Modal from '../components/Modal.vue';
import { useLoadingStore } from '../stores/loading';
import { useAuthStore } from '../stores/auth';
import { useSettingsStore } from '../stores/settings';

export default {
  components: {
    Modal,
  },
  data() {
    return {
      displayName: null,
      displayNameInvalidReason: null,
      email: null,
      modalShow: false,
      currentPassword: '',
      newPassword: '',
      changePasswordFormInvalidReason: null,
      audio: new Audio(Alarm),
    };
  },
  created() {
    useLoadingStore().loading = true;
    this.displayName = useAuthStore().getCurrentUser().displayName;
    this.email = useAuthStore().getCurrentUser().email;
    useLoadingStore().loading = false;
  },
  methods: {
    async saveName() {
      useLoadingStore().loading = true;

      if (this.displayName.length < 3) {
        this.displayNameInvalidReason = 'Display name must be 3 characters length or more';
        return;
      }

      if (this.displayName === useAuthStore().getCurrentUser().displayName) {
        return;
      }

      await useAuthStore().setDisplayName(this.displayName);
      useLoadingStore().loading = false;
    },
    async changePassword() {
      useLoadingStore().loading = true;
      const authStore = useAuthStore();

      try {
        await authStore.reauthenticateWithPassword(this.currentPassword);
      } catch (error) {
        if (error.code === 'auth/wrong-password') {
          this.changePasswordFormInvalidReason = 'Wrong password';
        } else {
          this.changePasswordFormInvalidReason = `Unknown error: ${error.code}`;
        }

        useLoadingStore().loading = false;
        return;
      }

      try {
        await authStore.changePassword(this.newPassword);
      } catch (error) {
        this.changePasswordFormInvalidReason = `Unknown error: ${error.code}`;
        useLoadingStore().loading = false;

        return;
      }

      this.modalShow = false;
      this.newPassword = '';
      this.currentPassword = '';
      useLoadingStore().loading = false;
    },
    async signOut() {
      useLoadingStore().loading = true;

      await useAuthStore().logout();
      await this.$router.push('/login');
    },
  },
  beforeUnmount() {
    this.audio.pause();
    this.audio = null;
  },
};
</script>

Все работает в деве, но в сбилженной версии получаю такую ошибку: Uncaught ReferenceError: currentPassword is not defined

Answer 1

[kokapuk]

В принципе, все будет работать, если v-model заменить на ручное связывание

@input="
            (event) => {
              currentPassword = event.target.value;
              changePasswordFormInvalidReason = null;
            }
          "
          :value="currentPassword"

но все же хотелось бы узнать, почему это не работает в слотах компонента