How to show selected subcategory in the product edit form?

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)

Route

Route::get('edit/product/{product_id}/{category_id?}', [ProductController::class, 'edit'])->name('edit.product'); //Form: Edit Product

Controller Method

public function edit(Product $product, $product_id, $category_id = null)
    {     
        return Inertia::render('Product/Edit', [        
            'categories' => Category::has('subcategories')->get(['id', 'name']),           
            'product' => Product::with('category:id,name')
                                ->with('subcategory:id,name')
                                ->where('id', '=', $product_id)
                                ->get()->toArray(),                  
            'subcategories' => Inertia::lazy(fn () =>              
                Subcategory::with('category')
                            ->where('category_id', '=', $category_id)
                            ->get()                    
            ),            
        ]);            
    }

Edit.vue

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>

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>

Data in props

categories

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

product

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

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"
    }
  }
]