Vue 3 - Component is not loaded or rendering

Question

I have following component:

<script setup>

import {defineProps, ref, watch} from "vue";
import ProductsComponent from '@/components/Products.vue'
import OrdersComponent from '@/components/Orders.vue'
import {useTableOrderStore} from "@/store/tableOrder";

const tableOrderStore = useTableOrderStore()

const props = defineProps({
  orderID: {
    type: Number
  },
  tableID: {
    type: Number
  },
  tableName: {
    type: String
  }
})

let orders = ref([])

watch(props, (newProp, oldProp) => {
  orders = tableOrderStore.tableOrders

  console.log(orders)
})

</script>
<template>
  <products-component :tableName="tableName"></products-component>
  <orders-component v-for="order in orders" :order="order" :key="order.id"></orders-component>
</template>

And OrdersComponent which is loaded in this component:

<script setup>

import {watch} from "vue";

let props = defineProps({
  order: {
    type: Array,
    required: true
  }
})

watch(props, (newProp, oldProp) => {
  console.log(newProp)
})

console.log(12333)

</script>

<template>
  <div class="row">
    {{ order }}
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, expedita?
  </div>
</template>

When the main component is shown, ProductsComponent is loaded and shown, but OrdersComponent is not. What am I doing wrong here?

Answer 1

The component is not rendered because the array orders is still empty and the watcher to update it is not working properly which should be written by returning props from callback and adding other options (immediate and deep):

let orders = ref([])

watch(()=>props, (newProp, oldProp) => {
  orders.value = tableOrderStore.tableOrders

  console.log(orders.value)
},{
immediate:true,
deep:true //since props are an object
})