Маска\Фильтр для поля даты

Всем привет. Вопрос прост. Помогите разобраться почему не работает маска для поля ввода даты.

Пробовал 2 способами.

1. Отслеживал нажатия на кнопки, брал кейкоды кнопок и через условия пропускал только цифры, после второй и 4 цифра ставил точки, чтобы формат даты был ДД.ММ.ГГГГ.
2. Исполььзовал регулярное выражение.
3. Совместил 1 и 2.

Но по итогу 1 вариант не плох, но у меня не работает ни del backspace. По кейкоду вижу, что backspace это число 8, и проверка в if проходит. Но Символы все равно не удаляются. А отчиститьь строку заранее нельзя т.к. в ней должна быть дефолтно текущая дата

2 вариант тоже непонятнр как работает. Либо опять же блокируется бэкспейс и я ничего не могу удалить либо вообще ничего не могу написать.

Единственное что работает - простоя регулярка, запрещающая писать указанные символы

Пример кода первого и второго варианта вместе

   function testInput ($event: { keyCode: number; preventDefault: () => void }) {
  const char = String.fromCharCode($event.keyCode)
  if (/^([0-9]{2})\\.([0-9]{2})\\.([1-2][0-9]{3})$/.test(char)) return true
  else $event.preventDefault()

  if ($event.keyCode < 47 || $event.keyCode > 57 || $event.keyCode === 8) {
    console.log('default')
    $event.preventDefault()
  }
  var len = showCreateDate.value.length
  if (len !== 3 && len !== 1) {
    if ($event.keyCode === 47) {
      $event.preventDefault()
    }
  }
  if (len === 2) {
    if ($event.keyCode !== 8 && $event.keyCode !== 46) {
      showCreateDate.value = showCreateDate.value + '.'
    }
  }
  if (len === 5) {
    if ($event.keyCode !== 8 && $event.keyCode !== 46) {
      showCreateDate.value = showCreateDate.value + '.'
    }
  }
}

Как можно эту задачу реализовать во vue ? или моежт можно как-то мой код исправить ?