I have found a really easy way to achieve what I want. I'm surprised I was unable to find it anywhere, so I'm sharing it for whomever stumbles upon the same problem.

Let's say you have a div with x-data that contains the variable that you want to pass to htmx:

<div x-data="{
    dataForHtmx: {'key1': 1, 'key2': [1,2,3]},
    
    init() {
        Alpine.store('dataForHtmx', this.dataForHtmx);
    },
}">

As you can see, you just need to define the init method and call Alpine.store to make your alpine.js variable visible to outside js code. Now that's how the htmx ajax element needs to look like:

<form hx-post="/your_handle" hx-vals="js:{'data': JSON.stringify(Alpine.store('dataForHtmx'))}" hx-ext="json-enc" class="form" id="form">

And that's it. The value of dataForHtmx will be turned into a json string that you can parse in your backend code. And an amazing thing is that you can manipulate dataForHtmx however you want via x-model etc, and the changes will be reflected in the request. Don't forget to include the json-enc extension, otherwise your request will be in the form of query params.