один и тот же компонент vuejs с разными данными

#vue.js

Вопрос:

Сначала взгляните на следующий код :

 <select-contact v-if="currentStep == 1" type="pickup"/>
<select-contact v-if="currentStep == 2" type="dropoff"/>
 

Как вы можете видеть, я включаю некоторые компоненты в родительский компонент, и в select-contact компоненте у меня есть следующий код :

 export default {
    props : ['type'],
    data : function () {
        return {
            contact : {}
        }
    }
}
 

Когда currentStep есть 1 пользователь, который может редактировать contact объект и управлять им. например, наборы contact.email = 'blah' и contact.phone = 'bla-blah'
Проблема в том, что когда мы переходим к следующему шагу и currentStep получаем 2, во втором компоненте contact объект не пуст и в нем есть contact.email = 'blah' и contact.phone = 'bla-blah' .

как я могу иметь разные данные в этих двух компонентах?