Quasar2 Vue3 QDate close on Selection

QDateTest.vue

<template>
  <div class="col q-ma-xs q-gutter-y-xs">
    <div class="text-h4 q-mb-sm">Test QDate</div>
    <div class="row q-gutter-x-xs">
      <q-input label="First Name" v-model="firstname" outlined dense />
      <q-input label="Last Name" v-model="lastname" outlined dense />
    </div>
    <div class="row q-gutter-x-sm">
      <q-input label="Date of Birth" v-model="dofb" outlined dense>
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="qpopup1">
              <q-date
                v-model="dofb"
                mask="MM-DD-YY"
                today-btn
                @update:modelValue="qpopup1.hide()"
              >
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const firstname = ref("");
const lastname = ref("");
const dofb = ref("");
const qpopup1 = ref(null);
</script>