Error in render: "TypeError: Cannot read property 'mixtures' of null"

I'm trying to loop through a nested array of mixtures.. the problem is that I'm always getting null error although I can see the array coming correctly in the vue console..

I have this api from laravel..

  $bacs=Bac::where('machine_id',$rental->machine->id)->with('product','product.mixtures')->get();
            return response()->json(['status' => 200 ,'bacs' =>$bacs ]);

and I'm fetching it here ..

     getBacs() {
                axios.get('api/rental/' + this.rentalId)
                    .then((response) => {

                        console.log(response.data.bacs);
                        this.bacs = response.data.bacs;
                    })
                    .catch(function (error) {

                        console.log(error);
                    })


            },

   <div class="col-md-6" v-for="bac in bacs">
                            <div class="form-group " style="display: flex; flex-direction: column">
                                <label class="col-12">Melange par defaut </label>
                                <select class="form-control" v-model="bac.mixture_id"
                                    :disabled="bac.status == 'en panne' || bac.status == 'en sommeil'">

                                    <option v-if=" bac.product.mixtures"
                                        v-for="mixture in bac.product.mixtures" :value="mixture.id">{{mixture.name}}
                                    </option>


                                </select>
                            </div>

                        </div>