Netlify formsとvuetifyのお問い合わせフォームを連携したい

現在nuxt.js（UIframework：vuetify）で開発し、netlifyでホスティングするようなホームページを制作しています。

サーバーレスサイトがいいということで、netlify formsの機能を使ってお問い合わせ内容をメールアドレスに通知が行くように飛ばそうと考えていました。

しかし、vuetifyのformsコンポーネントを用いてお問い合わせフォームを作ったためか、netlify formsとの連携を取ることができません。

もしvuetify,その他uiframeworkを用いてnetlify formsと連携させたことがある人がいましたら教えて欲しいです。

それに手間がかかるようでしたら素直にvuetifyを使わずにお問い合わせフォームを作り、netlify formsと連携しようと考えております。
どなたかよろしくお願いします。

nuxt
1<v-form ref="form" v-model="valid" lazy-validation class="form-area"  data-netlify="true"  name="contact" method="POST" >
2      <h3 class="form-title">お問い合わせフォーム</h3>
3      <v-text-field
4        v-model="お名前"
5        :counter="10"
6        :rules="nameRules"
7        label="Name"
8        required
9        class="form-input"
10        type="hidden"
11      name="name"
12      ></v-text-field>
13
14      <v-text-field v-model="email" :rules="emailRules" label="メールアドレス" required class="form-input" name="mail" type="hidden" ></v-text-field>
15
16      <v-textarea counter label="お問い合わせ内容" :rules="rules" :value="value" class="form-input" name="message" type="hidden" ></v-textarea>
17
18      <v-checkbox
19        v-model="checkbox"
20        :rules="[v => !!v || '内容を確認してチェックしてください。']"
21        label="内容に間違いはありませんか?"
22        required
23        class="form-input"
24      ></v-checkbox>
25
26      <v-btn :disabled="!valid" color="success" class="mr-4" @click="validate" type="submit">送信</v-btn>
27    </v-form>