How to get selected subcategory in the dropdown?

When I open Edit Product form, I want to show SELECTED old Category and Subcategory in the drop-down. I’m only getting selected Category but I also want to show Selected Subcategory.

I have 3 props: categories, product, subcategories

categories: when user open the page all categories are available in this prop
product: The product that user wants to edit in this prop
subcategories: When user change the category then I’m PARTIAL LOADING it’s subcategories using Inertia.Js

  • Frontend: VueJs (v3)
  • Server Side Rendering: IneratiaJs
  • Backend: Laravel (v9)

SCRIPT

<script setup>
const props = defineProps({
  errors: Object,
  categories: Object,
  subcategories: Object,
  product: Object,
})

const form = useForm({
    category_id: props.product[0].category.id,
    subcategory_id: props.subcategories,  //It's working but only when user changed the category, how should I show selected SUBCATEGORY??
    product_id: props.product[0].id,
    name: props.product[0].name,
    price: props.product[0].price,
    discount: props.product[0].discount
});

let getSubcategory = (event) => { 
    if(event.target.value !== "") {
       Inertia.visit(
            route('edit.product', { 
                product_id: form.product_id,
                category_id: event.target.value 
            }),{ 
                only: ['subcategories'],
                preserveState: true,
                preserveScroll: true,
            }
        );
    }
}

const submit = () => {
    form.put(route('update.product'), {
        onFinish: () => form.reset(),
    });
};
</script>

PROPS Data

categories:

[
  { "id": 7, "name": "Electronics" },
  { "id": 8, "name": "Fashion" },
  { "id": 10, "name": "Grocery" },
  { "id": 18, "name": "Home" }
]

subcategories:

[
  {
    "id": 3,
    "name": "Men Footwear",
    "description": "NA",
    "category_id": 8,
    "category": {
      "id": 8,
      "name": "Fashion",
      "description": "NA"
    }
  },
  {
    "id": 4,
    "name": "Women Footwear",
    "description": "NAaa",
    "category_id": 8,
    "category": {
      "id": 8,
      "name": "Fashion",
      "description": "NA"
    }
  }
]

product:

[
  {
    "id": 3,
    "name": "product 3",
    "price": "725",
    "image": "image.jpg",
    "discount": "5",
    "description": "product 3 description",
    "category_id": 8,
    "subcategory_id": 3,
    "category": {
      "id": 8,
      "name": "Fashion"
    },
    "subcategory": {
      "id": 3,
      "name": "Men Footwear"
    }
  }
]

TEMPLATE

<form @submit.prevent="submit">
   <div v-if="$page.props.flash.errormsg" class="mt-4 text-red-400">
      {{ $page.props.flash.errormsg }}
   </div>
   <div v-if="$page.props.flash.successmsg" class="mt-4 text-green-400">
      {{ $page.props.flash.successmsg }}
   </div>
   <div class="mt-4">
      <BreezeLabel for="category_id" value="Category Name" />
      <select @change="getSubcategory" v-model="form.category_id"  id="category_id" class="block mt-1 w-full">
         <option value="">Select Category</option>
         <option  v-for="category in categories"  :value="category.id">{{ category.name }}</option>
      </select>
      <div v-if="errors.category_id" class="text-red-400">
         {{ errors.category_id }}
      </div>
   </div>
   <div class="mt-4">
      <BreezeLabel for="subcategory_id" value="Subcategory Name" />
      <select v-model="form.subcategory_id" id="subcategory_id" class="block mt-1 w-full">
         <option disabled value="">Select Subcategory</option>
         <option  v-for="subcategory in subcategories" :value="subcategory.id">{{ subcategory.name }}</option>
      </select>
      <div v-if="errors.subcategory_id" class="text-red-400">
         {{ errors.subcategory_id }}
      </div>
   </div>
   <div class="mt-4">
      <BreezeLabel for="product_name" value="Product Name" />
      <BreezeInput id="product_name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus />
      <div v-if="errors.name" class="text-red-400">
         {{ errors.name }}
      </div>
   </div>
   <div class="mt-4">
      <BreezeLabel for="discount" value="Discount" />
      <BreezeInput id="discount" type="text" class="mt-1 block w-full" v-model="form.discount" required autofocus />
      <div v-if="errors.discount" class="text-red-400">
         {{ errors.discount }}
      </div>
   </div>
   <div class="mt-4">
      <BreezeLabel for="price" value="Price" />
      <BreezeInput id="price" type="text" class="mt-1 block w-full" v-model="form.price" required autofocus />
      <div v-if="errors.price" class="text-red-400">
         {{ errors.price }}
      </div>
   </div>
   <div class="mt-4">
      <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
         Edit Product
      </BreezeButton>
   </div>
</form>