[Vuejs]-How to make this form in a multistep form in vue.js

Since all three of you friend contact forms are basically the same, I created a Vue 2 CLI application that reuses the same form component three times.

I included the HTML table in the template just to view the list of contacts once three have been created.

Obviously up to you what you do with the contacts once they are created (post to a database, etc).

Home.vue

<template>
  <div class="home">
    <h3>Home</h3>
    <div class="row">
      <div class="col-md-4">
        <button class="btn btn-primary" v-if="!displayForm && !displayTable" @click="showForm">Add Friends</button>
      </div>
    </div>
    <friend-contact-form v-if="displayForm" @save-contacts="saveContacts" />
    <table v-if="displayTable" class="table table-bordered">
      <thead>
        <tr>
          <td>FIRST NAME</td>
          <td>LAST NAME</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(contact, index) in contacts" :key="index">
          <td>{{ contact.firstName }}</td>
          <td>{{ contact.lastName }}</td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-primary" v-if="displayReset" @click="reset">Reset</button>
  </div>
</template>

<script>
  import FriendContactForm from './FriendContactForm'

  export default {
    components: {
      FriendContactForm
    },
    data() {
      return {
        contacts: [],
        displayForm: false,
        displayTable: false,
        displayReset: false
      }
    },
    methods: {
      showForm() {
        this.displayForm = true;
      },
      saveContacts(contacts) {
        //console.log(contacts);
        this.contacts = contacts;
        this.displayForm = false;
        this.displayTable = true;
        this.displayReset = true;
      },
      reset() {
        this.contacts = [];
        this.displayForm = false;
        this.displayTable = false;
        this.displayReset = false;
      }
    }

  }
</script>

FriendContactForm.vue

<template>
  <div class="friend-contact-form">
    <div class="row">
      <div class="col-md-4">
        <hr>
        <h4>Friend {{ currentContactNumber[numContacts] }}</h4>
        <form @submit.prevent="saveContact">
          <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" v-model="contact.firstName">
          </div>
          <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" v-model="contact.lastName">
          </div>
          <button class="btn btn-primary">{{ formBtnLabel }}</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        contact: {},
        contacts: [],
        maxContacts: 3,
        currentContactNumber: ['One', 'Two', 'Three']
      }
    },
    computed: {
      numContacts() {
        return this.contacts.length;
      },
      formBtnLabel() {
        return (this.numContacts < (this.maxContacts - 1)) ? 'Next' : 'Finish';
      }
    },
    methods: {
      saveContact() {
        if (this.numContacts < this.maxContacts) {
          let contactCopy = { ...this.contact };
          this.resetContact();
          this.contacts.push(contactCopy);
        }

        if (this.numContacts === this.maxContacts) {
          this.$emit('save-contacts', this.contacts)
        }
      },
      resetContact() {
        this.contact = {}
      }
    }
  }
</script>