How to fix a Vue3/Vuetify3 datepicker that's hidden behind a card?

My project uses Vue3 and Vuetify3.
And I want to add a datepicker to my code. But I didn't find one in vuetify3.

I create my project with:

vue create vuetify
cd [project dir]
yarn add @vuepic/vue-datepicker

My component code is:

<template>
  <v-card class="mt-16">
    <v-card-title>Crop Management</v-card-title>

    <v-card-text>
      <v-row>
        <v-col>
          <v-select
            label="Crop"
            :items="crop_list"
            variant="outlined"
          ></v-select>
        </v-col>

        <v-col>
          <vue-date-picker></vue-date-picker>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script>
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
export default {
  name: "CropManagement",
  components: {
    VueDatePicker
  },
  data() {
    return {
      crop_list: [
        "Strawberry",
        "Alfalfa"
      ],
    };
  },
};
</script>

<style scoped></style>

screenshot

But my datepicker is under the card.
How can I solve this problem?

I tried change z-index, but isn't work.

The datapicker attaches to the input element, but then gets clipped by the card, so it is not visible.

Setting the teleport property fixes the issue:

<vue-date-picker
  :teleport="true"
></vue-date-picker>

From the documentation:
> Use teleport to position the datepicker menu. This is useful if you have hidden overflow on the parent HTML element where the menu is not showing in full. If you just set the value to true, the menu will be placed on body

Here it is in a snippet:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
components: {'vue-date-picker': VueDatePicker},
data() {
return {
teleport: true,
};
},
}
createApp(app).use(vuetify).mount('#app')

<!-- language: lang-html -->

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href=" https://cdn.jsdelivr.net/npm/@vuepic/vue-datepicker@5.1.2/dist/main.min.css " rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-card>
<v-card-title>Crop Management</v-card-title>
<v-card-text>
<v-row>
<v-col>
<v-switch
v-model="teleport"
label="Use teleport"
></v-switch>
</v-col>
<v-col>
<vue-date-picker
:teleport="teleport"
></vue-date-picker>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-main>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vuepic/vue-datepicker@5.1.2/dist/vue-datepicker.iife.js"></script>

<!-- end snippet -->