Date-picker in v-menu is not showing up (Vuetify)

Question

I have a v-menu that's supposed to let user select a date, and that date will be displayed on a text-field.

Here's the v-menu:

<v-menu v-model="selectDate
    <template v-slot:activator="{ on }">    
        <v-text-field v-on="on" :value="eventDate" label="Event Date" readonly></v-text-field>
    </template>
    <v-date-picker @input="selectDate = false" v-model="eventDate" no-title ></v-date-picker>
</v-menu>

and the script:

<script>
export default{
    data() {
        return{
            selectDate: false,
            eventDate: null,
        }
    }
}
</script>

I've been trying to read the documentation for Menus and this thread was pretty useful, but it's still not popping up. I initially started from this YouTube tutorial but it's outdated.

Changing :value="eventDate" to v-model="eventDate" still doesn't make it pop up.