Accessing the data that is passed by the controller in a JavaScript/jQuery function

I am currently having a trouble accessing the data that is passed through my controller to go to my JavaScript/jQuery Function.

Here is my controller

FruitsController.php

public function displayFruits()
    {   
        // assuming that the $fruits array values are extracted from the database 
        $fruits = ['banana', 'apple', 'mango'];
        // dd($fruits);
        return view('auth.user_settings', [
            'fruits' => $fruits
        ]);
    }

so when I tried to dd the fruits it is display the array values.
and same goes to the auth.user_settings it displays the array values when using foreach to the variable.

as for my js file it is named as dropdown.js

$(document).ready(function() {
    // I want to fetch the array fruits here
    let arrayFruits = [];

    console.log(arrayFruits);
});

and as you can see above the view that it returns is on auth.user_settings
the structure of the auth.user_settings is something like this;

<x-user_settings>
// the content of the user_settings goes here. I have created a separate component for the dropdown so it won't get clustered.
// I can access the fruits that was passed by the controller in this page
   <-x-fruits_dropdown>
     //dropdown ui here
   </x-fruits_dropdown>
</x-user_settings>

What I want to achieve is that I want the controller to pass the data as well on my javascript file or in my jquery function.

I have tried adding this one the user_settings blade file

<script>
    var fruits = @json($fruits);
</script>

however it just throws an error that I the $fruits is undefined.

Any ideas better/approach or help are appreciated.