Laravel Cashier (Stripe): Unable to download invoice PDF

I'm currently using Laravel 8.22.0 with Jetstream, Cashier (Stripe), Inertia.js, and Vue.js. This is also just through my local computer.

I am trying to download a PDF of an invoice from Stripe. I used the Laravel Cashier (Stripe) docs to set up my route and my Vue page. When I click the download button a modal pops up with the garbage below instead of downloading a PDF.

%PDF-1.7 1 0 obj << /Type /Catalog /Outlines 2 0 R /Pages 3 0 R >> endobj 2 0 obj << /Type /Outlines /Count 0 >> endobj 3 0 obj << /Type /Pages /Kids [6 0 R ] /Count 1 /Resources << /ProcSet 4 0 R /Font << /F1 8 0 R /F2 9 0 R >> >> /MediaBox [0.000 0.000 612.000 792.000] >> endobj 4 0 obj [/PDF /Text ] endobj 5 0 obj << /Producer (��dompdf 1.0.2 + CPDF) /CreationDate (D:20210126182019+00'00') /ModDate (D:20210126182019+00'00') /Title (��Invoice) >> endobj 6 0 obj << /Type /Page /MediaBox [0.000 0.000 612.000 792.000] /Parent 3 0 R /Contents 7 0 R >> endobj 7 0 obj << /Filter /FlateDecode /Length 639 >> stream x����r�0��y r�X$Y�?���=0L���u�`�ǥӷ�QQ�X����"g������FZ0���pm~.
�Ir��H�HCﾍ%�=Ć�˻JI"�K�bH�H�"on1@I�&����/���|L����8���[�_+�CA� kTU�E_�3�ѝ�m�m�����ᰓ6�P~J��o�p�A����~.m������ͻ]Qm�"/��]�n��Ɩey]�p[���;�9Ÿ�Z�p E���f��ᔳ0��NJ0����DB> endobj 9 0 obj << /Type /Font /Subtype /Type1 /Name /F2 /BaseFont /Times-Bold /Encoding /WinAnsiEncoding >> endobj xref 0 10 0000000000 65535 f 0000000009 00000 n 0000000074 00000 n 0000000120 00000 n 0000000284 00000 n 0000000313 00000 n 0000000488 00000 n 0000000591 00000 n 0000001302 00000 n 0000001411 00000 n trailer << /Size 10 /Root 1 0 R /Info 5 0 R /ID[] >> startxref 1519 %%EOF

This is the route I'm using in routes/web.php:

Route::get('/invoices/{any}', function (Request $request, $invoiceId) {
    return $request->user()->downloadInvoice($invoiceId, [
        'vendor' => 'Testing',
        'product' => 'Test',
    ], 'my-invoice');
});

My Vue file where I pass my downloadInvoice method the invoice id when the download button is clicked:

<tbody>
    <tr v-for="invoice in invoices" :key="invoice.id">
        <td class="p-4" style="text-align:center;">{{ invoice.number }}</td>
        <td class="p-4" style="text-align:center;">{{ invoice.date }}</td>
        <td class="p-4" style="text-align:center;">{{ formatCurrency(invoice.total) }}</td>
        <td class="w-10 text-right">
            <button class="flex ml-auto text-sm text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none 
            hover:bg-indigo-600 rounded" @click="downloadInvoice(invoice.id)">Download</button>
        </td>
    </tr>
</tbody>

and where the downloadInvoice method calls the /incoices/{any} route using the invoice id:

<script>
    import AppLayout from './../Layouts/AppLayout'
    export default {
        components: {
            AppLayout,
        },

        props: ['invoices'],

        methods: {
            downloadInvoice(invoice_id) {
                this.$inertia.get('/invoices/' + invoice_id);
            }
        },
    }
</script>

Any help would be greatly appreciated!