Howdy!
Cool site
love the code front-panel. 
I looked at the source then GET’d your site from CLI and I think I may have an idea of what’s going on here. I’ve never used Vue.js in particular but getting your site via curl reveals some things. For starters, it looks like you did indeed add a hidden form that Netlify can see and will register at build time - I see that from my direct curl as:
<form id='form' name='contact-form' class='contact__form wow rubberBand' action='/done/' method='post' hidden>
and from what I can tell, there’s actually no other HTML loaded statically outside of the content of that form - so your static index page is just
<body>
<noscript>
<strong>
I'm sorry but this site doesn't work properly without JavaScript enabled :( Please enable it to
continue.
</strong>
</noscript>
<form id='form' name='contact-form' class='contact__form wow rubberBand' action='/done/' method='post' hidden>
<!-- Tons of omitted form fields here -->
</form>
<div id=app></div>
<script src=/js/chunk-vendors.e3ed9feb.js></script>
<script src=/js/app.a83160b2.js></script>
</body>
Which makes sense given what Vue.js is.
Anyway, point being that Netlify did register your form and transform the data elements on <form>
and you can see that they’re gone in the curl’d markup.
Now, contrast that with what’s in the DOM once your page is loaded (there’s a ton but here’s the form under your Contact page):
<form id="contact-form" name="contact-form" action="/done/" method="post" data-netlify="true"
data-netlify-honeypot="bot-field" netlify="" class="contact__form wow rubberBand"
style="visibility: visible; animation-name: rubberBand;"><input type="hidden" name="bot-field" value="contact-form">
<h3>I'm a busy bee, yet I'll try to reply within 24h!</h3>
<!-- etc.. omitted -->
</form>
and you should notice that this form doesn’t have any of the Netlify content omitted. It’s also worth noting that your original (‘static’) form is still in the DOM; it’s hidden and not nested within your app
div but it’s there.
So all that said, I believe that your Vue code is probably rendering a new form dynamically and you’re trying to add the Netlify data tags to that form when you render it in Vue. Since that form is being rendered after the build step of your site (like, WAY after – rendering client-side on load), it’s too late for Netlify to hook into your code and add the required scripting to ‘wire up’ Netlify forms.
Just for doc references before I add my 2c advice:
Netlify main docs @ working with JS rendered forms: Forms setup | Netlify Docs
Vue-specific form rendering guide (I have not read this and it does seem a tad old, so YMMV): How to Integrate Netlify Forms in a Vue App
My 2c
I think you understand that you have to have a form visible at build-time so that Netlify can hook in with the correct watchers and data-bindings. Where I think you’re having an issue is that you’re building a new form dynamically on the front end and have expectations around it that don’t necessarily fit. Here’s what I’d recommend trying. Two options:
a)
Because you have a static form that Netlify saw and hooked into, you should actually be able to dynamically make another form (your ‘real’ contact form) and not add any of the Netlify-specific data components; just make sure that the action
is the exact same, and that the name
is the exact same.
E.g. because you already have
<form id='form' name='contact-form' class='contact__form wow rubberBand' action='/done/' method='post' hidden>
(which you don’t need class
s for since it’s hidden btw
) - you can dynamically create a new / other form anywhere in your page via Vue that, as long as it also has action="/done/"
and name="contact-form"
and it should be able to send data up to your form submission box with any of the fields it contains. This is why you’re actually still receiving emails just fine. Because your extra Netlify tags on the dynamically-rendered form don’t actually matter - the important part was that you had a valid <form>
tag at build-time, which had a name
and action
that exactly match a form you make dynamically at runtime. That’s it
(it can get a little trickier with CAPTCHA’s but the docs talk through that) — SO tl;dr: just remove your Netlify data-attributes from your dynamically generated form and add any fields you want there and you’ll be good to go.
b)
Alternatively, you could also (again, I haven’t actually used Vue before but vanilla js can do this so I presume it can) just use JS to move your root form element that Netlify configured but is hidden into the form spot you want in your markup. I did this myself in the DOM and the content isn’t far off. Guessing here, but you’ll probably need to bind a couple of the form components into Vue so that you don’t get the weird text happening, but I can’t much help with that. I’m basically recommending that you absorb a static element into Vue’s tree.
Honestly I think this would work but there’s just no need. Do option a 
Hope that helps!
–
Jon