Code works with npm run dev, not with npm run build

Hello,

I have written this post in the Inertia category because I'm using InertiaJS, but it's perhaps a different problem.

I have a strange behavior with my code.

Here is a modal window with Element-Plus framework.

<template>

  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="30%"
    :show-close="false"
    :draggable="true"
    @open="load()"
    :close-on-click-modal="false"
    destroy-on-close
  >

		<el-form :model="form" label-position="top">
      <el-form-item label="Nom" :error="errors.name ? errors.name[0] : null" @input="errors.name = null">
	      <el-input v-model="form.name" type="text" autocomplete="off" />
	    </el-form-item>
		</el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit()">Enregistrer</el-button>
        <el-button @click="cancel()">Annuler</el-button>
      </span>
    </template>

  </el-dialog>

</template>

<script setup>

  import { ref, reactive } from 'vue'
	import { Inertia } from '@inertiajs/inertia'
	import { Link } from '@inertiajs/inertia-vue3'

	const emit = defineEmits(['submit', 'cancel', 'close'])

	const props = defineProps({
		roomId: Number,
		dialogVisible: Boolean,
	})

  const form = reactive({
    name: null,
  })

  const errors = ref([])

  const title = ref('Ajouter une nouvelle salle')

  function init(data) {
    form.name = data.name
  }

  function load() {
    if (props.roomId > 0) {
      title.value = 'Editer une salle'
      axios.get('/rooms/'+props.roomId+'/edit').then(response => {
        this.init(response.data)
      })
    } else {
      title.value = 'Ajouter une nouvelle salle'
      axios.get('/rooms/create').then(response => {
        this.init(response.data)
      })
    }
  }

  function submit() {
    if (props.roomId) {
      axios.put('/rooms/'+props.roomId, form).then(response => {
        emit('submit')
        errors.value = []
      }).catch(error => {
        errors.value = error.response.data.errors
      })
    } else {
      axios.post('/rooms', form).then(response => {
        emit('submit')
        errors.value = []
      }).catch(error => {
        errors.value = error.response.data.errors
      })
    }
  }

  function cancel() {
    errors.value = []
    emit('cancel')
  }

</script>

<style lang="scss" scoped>

	.el-card {
		&:first-child {
			margin-bottom: 20px;
		}
	}

  .card-header {
  	display: flex;
	  justify-content: space-between;
	  align-items: center;
  }

  .el-form-item {
  	margin-bottom: 0px;
  	&:last-child {
  		margin-right: 0px;
  	}
  }

</style>

I had a bug in the init() method which can't access to the name property (and the other properties).

But this occurs only when I build the JS.

npm run dev => no problem

npm run build => problem

I really don't know what I could check to solve this problem.

Updated => here is the error.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'init')

Thanks for your help.

V