Vuetify v-date-picker doesnt show up when changing to range prop - vue.js

Question

I am using this code on my project, it's a text-field that when I click on it pops a dialog which shows a calendar.
This works fine, however when I insert the range prop on the v-date-picker, the calendar doesn't show up anymore, only the dialog background. It is working fine on this codepen you can see below:
See the Pen
Vuetify Example Pen by Simão (#izzyDL)
on CodePen.
<div id="app">
<v-app id="inspire">
<v-row>
<v-col
cols="11"
sm="5"
>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
scrollable
range
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
#click="modal = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
#click="$refs.dialog.save(date)"
>
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>
Any ideas on what might be causing this issue ?

Answer 1

The snippet below is using your code and the picker shows up just fine. Am I missing something in your question?
One thing I should point out is that when using range prop date picker expects its model to be an array of length 2 or empty. In your code, the date prop is a string. It doesn't affect the calendar rendering though.
Screenshot
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: ['2019-09-10', '2019-09-20'],
menu: false,
modal: false,
}),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="11" sm="5">
<v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable range>
<v-spacer></v-spacer>
<v-btn text color="primary" #click="modal = false">
Cancel
</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>