How to correctly initialize a component?

Question

Vue.js

Introductory:
no build systems are used
We have:
Vue is connected to the page

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

This component is connected https://github.com/dbrekalo/vue-date-pick/blob/mas... (also via 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
        }
    })

Problem:
In general, it works, but there is no way to reuse the component: if you insert it on the page twice, the content will be identical and it's clear why - you need to pass it to the component
<date-pick v-model="date"></date-pick>

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

and not in the data object of the vue instance itself
And here's how to do it - I don't understand

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
        }
    })