There is a laravel project I'm working on, in which I have to retrieve data from database and then show it to the users. the thing is I have some pre-built components in javascript and the data needs to be inside of it. an example would be:

    var element = ` <div class="col-12 p-4 d-flex flex-column">
                      <h3 class="text-white">
                        {{$user_data->data}}
                      </h3>
                      <div class="bg-white p-3 rounded">
                        <p class="mb-0">
                        {{$user_data->data}}
                        </p>
                      </div>
                    </div>`;

and then I would add this element div to the blades body in my js file. the problem is that the php tags are working like strings so what I get instead of users data in the page is {{$user_data->data}}. Can anyone help me how to fix that?