$_POST value is empty in script but payload in network tab is not empty when posting with Axios in Vue 3

Question

I am trying out Vue JS 3 and am trying to post to a PHP script to get some JSON results.

This is what I've got:

let app = Vue.createApp({
    data: function(){
        return{
            responsedata:{}
        }
    },
    methods:{
        async fetchResults(){
            await axios.post('includes/searchproducts_json.php', {
                searchterm: this.$refs.searchterm.value,
            })
            .then((response)=>{
                this.responsedata = response.data
                console.log(responsedata)
            })
            .catch((error)=>{
                console.log(error)
            })
        }
    },
})

Then my HTML:

<div class="d-flex" id="v_search">
  <input type="text" ref="searchterm"  class="searchTerm1" placeholder="Zoeken naar...">
  <button type="submit" @click.prevent="fetchResults" class="searchButton">
    <i class="fa fa-search"></i>
  </button>
  {{responsedata}}
  <div id="prodresultsdesktop" class="prodresultsdesktop animatedopen">
    <span class="searching">...</span>
  </div>
</div>

When I press the search button this is what I see in my networktab:

{searchterm: "folie"}
searchterm: "folie"

The method is POST. Now if I do echo $_POST['searchterm'] in my searchproducts_json.php nothing comes up. I thought maybe I have to echo it a bit different so I wanted to show the entire $_POST variable to see whats in it, but it is empty.

This:

echo '<pre>';
print_r($_POST);
echo '</pre>';

Shows nothing.

What am I missing?