Как корректно инициализировать компонент?

Question

[nikoyar]

Вводная:
никакие системы сборки не используются
Имеем:
На страницу подключен vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Подключен этот компонент https://github.com/dbrekalo/vue-date-pick/blob/mas... (так же через script)
HTML:

<div id="app">
<date-pick
            v-model="date"
            :pick-time="true"
            :selectable-year-range="{ from: 2000, to: 2020 }"
            :format="'DD.MM.YYYY HH:mm'">
    </date-pick>
</div>

JS

new Vue({
        el: '#app,
        data: {
            date: ''
        },
        components: {
            'date-pick': VueDatePick
        }
    })

Проблема:
В общем - то это работает, но нет возможности переиспользовать компонент: если вставить
<date-pick v-model="date"></date-pick>
на страницу дважды, то контент будет идентичный и это понятно почему - надо передать в компонент

data: function(){
 return {
date: ''
}
}

а не в объект data самого экземпляра vue
И вот как это сделать - не пойму

Comments

[WapSter]

Привяжи экземпляр к переменной.

[nikoyar]

WapSter, а что это даст?

[WapSter]

nikoyar, разделение

[nikoyar]

WapSter, каким образом?
Насколько я понимаю, данные компоненту нужно передать до того как экземпляр vue будет вызван, а вызов нескольких экземпляров проблему не решит. или я не не понял чего то?

Answer 1

[Антон Антон]

HTML:

<div id="app">
<date-pick
            v-model="date1"
            :pick-time="true"
            :selectable-year-range="{ from: 2000, to: 2020 }"
            :format="'DD.MM.YYYY HH:mm'">
    </date-pick>
<date-pick
            v-model="date2"
            :pick-time="true"
            :selectable-year-range="{ from: 2000, to: 2020 }"
            :format="'DD.MM.YYYY HH:mm'">
    </date-pick>
</div>

JS

new Vue({
        el: '#app',
        data: {
            date1: '',
            date2: '',
        },
        components: {
            'date-pick': VueDatePick
        }
    })