Vuetify: Adaptive v-date-picker width v-dialog and v-menu - vue.js

Question

I want to do adaptive v-date-picker, i.e when phone page width then date picker open in v-dialog, and when desktop then data picker open in v-menu.
It's my try:
<template>
<div>
<template v-if="$vuetify.breakpoint.xsOnly">
<v-dialog
ref="dialog"
v-model="modal"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<slot name="input" ref="input" v-on="on"/>
</template>
<slot name="picker" ref="picker"/>
</v-dialog>
</template>
<template v-else>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<slot name="input" ref="input" v-on="on"/>
</template>
<slot name="picker" ref="picker"/>
</v-menu>
</template>
</div>
</template>
<script>
export default {
name: "v-date",
data() {
return {
menu: false,
modal: false,
}
},
methods: {
close() {
this.menu = false;
this.modal = false;
}
}
}
</script>
But v-on doesn't work. I try :listeners="on", it doesn't work too...
For example use component:
<v-date>
<template v-slot:input>
<v-text-field
label="Дедлайн"
v-model="data.deadline"
readonly
/>
</template>
<template v-slot:picker>
<v-date-picker v-model="data.deadline" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" #click="$refs.deadline.close()">ОК</v-btn>
</v-date-picker>
</template>
</v-date>

Answer 1

Thanks to KrasnokutskiyEA for the idea.
Work version:
<template>
<div>
<template v-if="$vuetify.breakpoint.xsOnly">
<v-dialog
ref="dialog"
v-model="modal"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<slot name="input" ref="input" :on="on"/>
</template>
<slot name="picker" ref="picker"/>
</v-dialog>
</template>
<template v-else>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<slot name="input" ref="input" :on="on"/>
</template>
<slot name="picker" ref="picker"/>
</v-menu>
</template>
</div>
</template>
<script>
export default {
name: "v-date",
data() {
return {
menu: false,
modal: false,
}
},
methods: {
close() {
this.menu = false;
this.modal = false;
}
}
}
</script>
Use:
<v-date>
<template v-slot:input="{ on }">
<v-text-field
label="Дедлайн"
v-model="data.deadline"
readonly
v-on="on"
/>
</template>
<template v-slot:picker>
<v-date-picker v-model="data.deadline" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" #click="$refs.deadline.close()">ОК</v-btn>
</v-date-picker>
</template>
</v-date>