AlpineJS with external function

I have the following button that is using AlpineJS:

<button
   x-data
   itemid="{{$item->ItemID}}"
   action="add" 
    x-on:click="addtocart" 
   class="inline-block py-1.5 px-3 m-1 text-xs text-center text-white align-middle whitespace-nowrap">
       Add
  </button>

and the following script tag:

<script>
function addtocart(e){
    action = e.target.getAttribute('action');
    itemid = e.target.getAttribute('itemid');
   
    if(action == 'add'){
        action = 'remove';
        actionText = 'Remove';
    } else {
        action = 'add'
        actionText = 'Add'
    }
    e.target.setAttribute('action',action);
    e.target.innerText = actionText;

    axios.post('/cart/add', {
        itemid: itemid,
        _token: '{{ csrf_token() }}',
    })
    .then(function (response) {
        //SweetAlert2
        Swal.fire({
        position: 'top-end',
        icon: 'success',
        title: response.data,
        showConfirmButton: false,
        timer: 1500
        })
    })
    .catch(function (error) {
        console.log(error);
    });
}
</script>

This works fine but I'm trying to extract the function out to it's own file. I've changed the first line of the function to:

window.addtocart = function addtocart(e){

The function is being triggered but I'm getting the following error:

Uncaught ReferenceError: action is not defined

I'm guessing that by moving the function to an external file, it is no longer getting any data. How can I modify the button or function so that I can get the data from the button and also change the button data from the function?

Thank you.