VueJS 3 : value cannot be made reactive: undefined

The error "value cannot be made reactive: undefined" is occurring because the user object is not initialized with any properties. In the code provided, user is declared as a reactive object using the reactive function from Vue 3, but it is not given any initial properties.

To fix this issue, you need to initialize the user object with the required properties (in this case, email and password). Here's an updated version of the code:

<script setup>
  import { reactive } from 'vue';
  import apiAuth from '@/services/apiAuth.js';

  const user = reactive({
    email: '',
    password: ''
  });

  async function login() {
    await this.$store.dispatch('auth/login', user);

    this.$router.push({ path: '/dashboard' });
  }
</script>

<template>
  <el-row align="middle" justify="center">
    <el-col :xs="22" :sm="12" :md="8">
      <el-card>
        <el-form
          label-width="100px"
          style="max-width: 460px"
        >
          <el-form-item label="Adresse mail">
            <el-input
              v-model="user.email"
              placeholder="Adresse mail"
            ></el-input>
          </el-form-item>

          <el-form-item label="Mot de passe">
            <el-input
              v-model="user.password"
              type="password"
              placeholder="Mot de passe"
            ></el-input>
          </el-form-item>

          <el-button type="primary" @click="login()">Se connecter</el-button>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
  .el-row {
    display: flex;
    height: calc(100vh - 103px);
  }
</style>

In this updated code, the user object is initialized with email and password properties set to empty strings. This ensures that the user object is reactive and can be used in the template without causing the "value cannot be made reactive: undefined" error.