Django-vue : Cannot correctly access the elements of the entity passed as params

Question

I have several entities Order, Company, Products. The Order table contains details including (Company, Products, Quantity...). But somehow I can't display some informations of the Order.

Here is my code in detail.

models.py

# model Company
class Companies(models.Model):
    company_id = models.AutoField(primary_key=True)
    order_number = models.CharField(max_length=500)
    company_name = models.CharField(max_length=500)
    company_email = models.CharField(max_length=500)
    class Meta:
        db_table ="companies"      

# model Product
class Products(models.Model):
    product_id = models.AutoField(primary_key=True)
    product_name = models.CharField(max_length=500)
    class Meta:
        db_table ="products"


# model Order
class Orders(models.Model):
    order_id = models.AutoField(primary_key=True)
    order_number = models.CharField(max_length=500)
    statut = models.CharField(max_length=500, default="validé")
    date_of_order = models.DateField()
    company = models.ForeignKey(Companies, on_delete = models.CASCADE)
    measure = models.ForeignKey(Measures, on_delete = models.CASCADE)
    products = models.ManyToManyField(Products, through='OrderDetail')
    class Meta:
        db_table ="orders"

# model OrderDetail
class OrderDetail(models.Model):
    order = models.ForeignKey(Orders, related_name='order_details', on_delete=models.CASCADE)
    product = models.ForeignKey(Products, related_name='order_details', on_delete=models.CASCADE)
    product_quantity = models.PositiveIntegerField(default=1)

    class Meta:
        db_table ="order_details

serializers.py

class OrderDetailsSerializer(serializers.ModelSerializer):
    product = ProductSerializer(read_only=True)
    company = CompanySerializer(read_only=True)

    class Meta:
        model = OrderDetail
        fields = '__all__'
        

class OrdersSerializer(serializers.ModelSerializer):
    order_details = OrderDetailsSerializer(many=True, read_only=True)
    products = ProductSerializer(many=True, read_only=True)
    company = CompanySerializer()

    class Meta:
        model = Orders
        fields = '__all__'

views.py

class OrderViewSet(viewsets.ModelViewSet):
    queryset = Orders.objects.all()
    serializer_class = OrdersSerializer

class OrderDetailsViewSet(viewsets.ModelViewSet):
    queryset = OrderDetail.objects.all()
    serializer_class = OrderDetailsSerializer

-OrderList.vue-

<template>
  <div>
      <table id="tableOrder">
        <thead>
          <tr>
            <th>Commande N°</th>
            <th>Date</th>
            <th>Statut</th>
            <th />
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in getOrders" :key="order.order_id">
            <td data-label="OrderNumber">
              {{ order.order_number }}
            </td>
            <td data-label="Date">
              {{ new Date(order.date_of_order).toLocaleDateString(DD - MM - YYYY) }}
            </td>
            <td data-label="Statut">
              <p
                class="border rounded-full py-0.5 px-2 text-center text-sm"
              >
                {{ order.statut }}
              </p>
            </td>
            <td class="before:hidden lg:w-1 whitespace-nowrap">
              <BaseButtons type="justify-start lg:justify-end" no-wrap>
                <BaseButton
                  small
                  :to="{
                    name: 'singleOrder',
                    params: { order_id: order.order_id },
                  }"
                />
              </BaseButtons>
            </td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

<script setup>
import { ref } from "vue";
    const orders = ref([]);
    const getOrders = async (order) => {
      try {
        const data = await axios.get("http://localhost:49146/orders-list");
        this.orders = data.data;
      } catch (error) {
        alert(error);
        console.log(error);
      }
    };
</script>

DetailOrder.vue

<template>
    <div
          class="order_invoice rounded-lg shadow-lg dark:shadow-jtordersTeal/75 px-8 py-10 mx-auto my-10"
        >
          <h3>{{ order.order_number  }}</h3>
          <div class="md:flex md:items-center md:justify-between mb-8">
            <div class="flex items-center">
              <div
                class="text-gray-700 dark:text-gray-100 font-semibold text-lg"
              >
                {{ order.company_name }}, Email :{{ order.company_email}}
              </div>
            </div>
            <div class="text-gray-700 dark:text-gray-100 py-4">
              <div class="font-semibold text-xl mb-2">Order Details</div>
              <div class="text-sm">
                Du :
                <span class="font-medium">{{
                  new Date(order.date_of_order).toLocaleDateString(
                    DD - MM - YYYY
                  )
                }}</span>
              </div>
              <div class="text-sm">
                N° : <span class="font-medium">{{ order.order_number }}</span>
              </div>
            </div>
          </div>

          <table class="w-full text-left mb-8">
            <thead>
              <tr>
                <th
                  class="text-gray-700 dark:text-gray-100 font-semibold uppercase py-2"
                >
                  Description
                </th>
                <th
                  class="text-gray-700 dark:text-gray-100 font-semibold uppercase py-2"
                >
                  Quantity
                </th>
              </tr>
            </thead>
            <!-- <tbody v-if="order.products != 0"> -->
            <tbody>
              <tr
                v-for="order_detail in order.order_details"
                :key="order_detail.id"
              >
                <td class="py-4 text-gray-700 dark:text-gray-100">
                  {{ order_detail.product.product_name }}
                </td>
                <td class="py-4 text-gray-700 dark:text-gray-100">
                  {{ order_detail.product_quantity }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
</template> 
        
        
        

<script setup>
import axios from "axios";
import { useRoute } from "vue-router"

    const route = useRoute();
    const order_id = ref(route.params.order_id);

    const getSingleOrder = async () => {
        axios.get(API_URL + "orders-list/" + `${order_id.value}`)
          .then((response) => {
            order.value = response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    };
onMounted(() => {
  getSingleOrder();
});
</script>

The orderorder_number, order_date are displayed, but what is :company_name, company_email, they don't display.

What did i do wrong in my code.

Thank you in advance