Laravel API for Vue Js to display dropdown in edit component (foreign key)

I have two tables - product and product materials. Product materials has "product_id" which references to the product table.

When someone wants to edit the data of product materials, they should get the option of updating the product_id in product materials.

I have done this in laravel blade (without javascript front-end), I want to repeat the same idea in Vue.js.

LOGIC WITHOUT VUE Product Material Controller getting both the datas of product & product_materials

    {
        $product_materials = product_materials::findOrFail($id);
        $product = product::all();
        return view('product_materials.edit')->with(compact('product_materials'))->with(compact('product'));
    }~~~
The blade page:

~~~<div class="form-group h7 p-2">
                            <label for="product">Product</label>
                            <select name="product_id">
                              <option value ="{{$product_materials->product_id}}"> {{$product_materials->product_id}} | {{$product_materials->product->name}} </option>
                             @foreach($product as $pro)
                              <option value="{{ $pro->id}}">{{$pro->id}} | {{$pro->name}} &nbsp;</option>
                             @endforeach
                         </select>
                          </div>~~~

Now I want to do this in Vue js

~~~public function show($id)
    {
        $product_material = product_materials::find($id);
        $product_material->load('product');
        return response()->json(
            $product_material
        );
    }~~~
(I am using API)

~~~<template>
  <div>
    <h3 class="text-center">Edit Product Materials</h3>
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <form class="card p-3 bg-light" @submit.prevent="updateProductMaterial">
          <div class="form-group">
            <label for="product">Product</label> <br />
            <select name="product_id">
              <option v-value="product_material.product.id">
                {{ product_material.product.id }} |
                {{ product_material.product.name }}
              </option>
              <option
                v-for="product in products"
                :key="product.id"
                v-value="product.id"
              >
                {{ product.id }} | {{ product.name }} &nbsp;
              </option>
            </select>
          </div>
          <div class="form-group">
            <label for="description">Description</label>
            <input
              type="text"
              class="form-control"
              v-model="product_material.description"
            />
          </div>
          <div class="form-group">
            <label for="quantity">Quantity</label>
            <input
              type="number"
              class="form-control"
              v-model="product_material.quantity"
            />
          </div>
          <div class="form-group">
            <label for="rate">Rate</label>
            <input
              type="number"
              step="any"
              class="form-control"
              v-model="product_material.rate"
            />
          </div>
          <br />
          <button type="submit" class="btn btn-primary">Update</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("Component mounted.");
  },
  data() {
    return { product_material: {} };
  },
  created() {
    this.axios
      .get(`/api/product_materials/${this.$route.params.id}`)
      .then((res) => {
        this.product_material = res.data;
      });
  },
  methods: {
    updateProductMaterial() {
      this.axios
        .patch(
          `/api/product_materials/${this.$route.params.id}`,
          this.product_material
        )
        .then((res) => {
          this.$router.push({ name: "product_material" });
        });
    },
  },
};
</script>~~~
I am getting the output for current product materials which is referencing the product. But not getting any output for user to select options from product table. I have tried to send two arrays using json, product and product_materials and when I do that nothing is displayed.