(vue)vuetifyのv-stepperで次のページへ遷移する前にフォームが空欄であったら遷移しない様に検証したい

コード

<template>
    <v-app>
　　　　　　　　　　<v-stepper v-model="s1">
　　　　　　　　　　 <v-stepper-items>
   　　　　　　　<v-stepper-content step="1">
   　　　　　　 <p>Step1情報入力</p>
    　　　　　　　<v-text-field type="text" v-model="formInline.nickname"  label="ニックネーム" :rules="rules.nickname"></v-text-field>
    　　　　　　　<v-textarea v-model="formInline.profile" label="プロフィール" :rules="rules.profile"></v-textarea>
   　　　　　　　 <v-btn color="primary" @click="s1 = 2" :rules="rules.button1">次へ</v-btn>
 　　　　　　　 </v-stepper-content>
　　　　　　　　<v-stepper-content step="2">
.
.//省略
.
　　　　　　　　</v-stepper-content>
　　　　　</v-stepper-items>
　　　</v-stepper>
　</v-app>
</template>

<script>
  data: function() {        
    return{
　　　　　　　　　　　　　　　　s1:1,
        formInline: {
            nickname: '',
            profile: '',
　　　　　　　　　　　　　　　　}
        rules:{
            nickname:[
                v => !!v || 'ニックネームは必須です'
            ],
            profile:[
                v => !!v || 'プロフィールは必須です'
            ],
            button1:[
　　　　　　　　　　　　　　　　　　　　　　　　　　　//ここに処理を入れる形となるか？
            ]
        }
    }
</script>

問題

以上の様にvuetifyのv-stepperによるウィザードフォームが実装されている画面があります。
次へというボタンをクリックするとstep1ページからstep2ページに遷移するのですが、
ボタンをクリックし遷移を行う前に、nicknameフォームとprofileフォームが空欄でないかチェックし、空であったら遷移しない様にしたいのですがどの様な処理を書けば遷移しないか分かりません。
rules属性を使い検証する形となると思うのですが、どの様に書けば良いか分からない状態です。
お手数をおかけしますがご教示いただけると幸いです。