I’m working on a Vue 3 project using Vuetify, and I’m having trouble with a v-select component. The selected value is being sent as [object Object] instead of the actual value.

Here is a simplified version of my code:

Parent Component

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        <v-card class="mb-4" rounded>
          <template v-slot:title>
            <span class="font-weight-black">Generate Synthetic Customer</span>
          </template>
          <v-card-text>
            <v-form>
              <FormFields :form="form" />
              <SubmitButton :loading="loading" :submitForm="submitForm" />
              <v-col cols="12" v-if="error">
                <v-alert :value="true" type="error" dismissible>
                  {{ error }}
                </v-alert>
              </v-col>
              <ComponentStatusSelect
                :result="result"
                :selectedComponentStatus="selectedComponentStatus"
                @update:selectedComponentStatus="val => selectedComponentStatus = val"
              />
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6">
        <v-card class="mb-4" rounded v-if="result">
          <template v-slot:title>
            <span class="font-weight-black">Customer Information</span>
          </template>
          <v-card-text>
            <b>Name:</b> {{ `${result.firstName} ${result.lastName}` }}<br />
            <b>Date of Birth:</b> {{ result.dateOfBirth }}<br />
            <b>KurtId:</b> {{ result.kurtId }}<br/><br/>
            <b>Address:</b> {{ `${result.streetName} ${result.postalCode} ${result.postalArea}` }}<br/>
            <b>FarId:</b> {{ result.farId }}<br /><br />
            <b>Component:</b> {{ componentEvaluation }}<br/>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { useRuntimeConfig } from '#imports';
import FormFields from './FormFields.vue';
import SubmitButton from './SubmitButton.vue';
import ComponentStatusSelect from './ComponentStatusSelect.vue';

const config = useRuntimeConfig();

const form = ref({
  firstName: 'DEDIKERT',
  lastName: 'TUSJ',
  dateOfBirth: '1969-08-06',
  dNumber: '',
});

const result = ref(null);
const ComponentEvaluation = ref('');
const selectedComponentStatus = ref('');
const loading = ref(false);
const error = ref(null);

const submitForm = async () => {
  loading.value = true;
  error.value = null;
  result.value = null;
  try {
    const response = await axios.post(`${config.public.apiBaseUrl}/v1/synthetic-customer`, form.value, {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    result.value = response.data;
    Component.value = response.data.ComponentStatus || 'N/A';
  } catch (err) {
    error.value = 'Error generating customer: ' + err.message;
    console.error('Error generating customer:', err);
  } finally {
    loading.value = false;
  }
};

const changeComponentEvaluation = async () => {
  if (!result.value || !result.value.kurtId) {
    error.value = 'No valid customer to update';
    return;
  }
  loading.value = true;
  console.log('Changing Component status to:', selectedComponentStatus);
  try {
    const response =
    ComponentEvaluation.value = response.data.ComponentStatus;
  } catch (err) {
    error.value = 'Error changing Component: ' + err.message;
    console.error('Error changing Component:', err);
  } finally {
    loading.value = false;
  }
};

watch(selectedComponentStatus, (newStatus) => {
  console.log('New selected Component status:', newStatus);
  if (newStatus) {
    changeComponentEvaluation();
  }
});
</script>

Child Component (ComponentStatusSelect.vue)

<template>
  <v-col cols="12" v-if="result">
    <v-select
      :model-value="selectedComponentStatus"
      @update:model-value="updateSelectedComponentStatus"
      :items="ComponentStatusOptions"
      label="Change Component"
      item-title="text"
      item-value="value"
      outlined
      dense
    ></v-select>
  </v-col>
</template>

<script setup>
const props = defineProps({
  result: Object,
  selectedComponentStatus: String,
});

const componentStatusOptions = [
  { text: 'A', value: 'A' },
  { text: 'M ', value: 'M' },
  { text: 'D', value: 'D' },
  { text: 'F', value: 'F' },
];

const emit = defineEmits(['update:selectedComponentStatus']);

const updateSelectedComponentStatus = (value) => {
  emit('update:selectedComponentStatus', value);
};
</script>

Problem
When I select an option from the v-select, the value sent to the backend is [object Object] instead of the actual value.

What I’ve Tried

1. Verified that the componentStatusOptions have text and value properties.
2. Ensured the v-select uses item-title=”text” and item-value=”value”.
3. Added console logs to verify the selected value.

Expected Behavior
The selected value should be sent as the corresponding string (e.g., ‘A’, ‘M’, ‘D’).

Actual Behavior
The selected value is being sent as [object Object].