[Vuejs]-FormData object is empty when using vue @submit directive

I imagine this is an issue with how the CDN version of Vue parses a template from existing HTML.

Each element is replaced with the Vue compiled element equivalent.

The form you captured at the start is no longer the one emitting the submit event. You can easily check this by comparing form === e.target.

If you use the following it works as expected.

const formData = new FormData(e.target);

In short, you’re doing things in a very non-Vue way so it’s little surprise you’ve encountered some friction.