Inertia Filepond - getting file data for axios post

I've just completed the Advanced Image Uploading with Vue and Laravel series and am trying to build a PDF uploader with the functionality that I need. The series was uploading the files as soon as the user drag and dropped the file.

In my use case I need to allow the user to drag and drop the file, fill out other fields, then submit the form. If I used the functionality from the series it would upload the file to the server/update database as soon as the user added a file. This is not ideal as I only want the file to be stored/database updated if the other form data is valid. So, what I've done is wrapped the Filepond component inside a form that has a function run on submission click. I would then use Axios to a Laravel POST endpoint which validates the form fields and handles file upload if successful.

Ideally the end goal would be for my controller to access the file with:

$file = $request->file('pdf');

The issue I'm having is that this parameter is always empty.

From checking multiple online resources I need to use something like this before the Axios request to manually send the file data:

this.$refs.pond.getFiles();

However, I'm always getting this error in my console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$refs')

I've tried accessing this "onMount" but always get the same error. I have the Vue Chrome Tools extension and can see the refs in my component.

This is what my code currently looks like:

<template>
    <div class="tailwind-classes">
        <h1 class="mb-3">TITLE</h1>

        <div>
            <form @submit.prevent="submitPdfForm">
                <div>
                    <file-pond
                        name="pdf"
                        ref="pond"
                        label-idle="Drop PDF file here..."
                        accepted-file-types="application/pdf"
                        max-file-size="2MB"
                        :allow-multiple="false"
                        :instantUpload="false"
                    />
                </div>
                <div>
                    <button 
                        type="submit" 
                        class="tailwind-classes"
                    >
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { usePage } from '@inertiajs/inertia-vue3';
import axios from "axios";
import vueFilePond, { setOptions } from "vue-filepond";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

setOptions({
    server: {
        process: {
            headers: {
                'X-CSRF-TOKEN': usePage().props.value.token
            }
        }
    },
    credits: ''
});

const filePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginFileValidateSize);

function submitPdfForm() {
    console.log(this.$refs.pond); //ERROR

    //AXIOS POST TO CONTROLLER WILL GO HERE

    return;
    });
}

onMounted(() => {
    console.log(this.$refs); //Error in console
});
</script>

Any help is much appreciated.