focus() input element not working

[adgower]

Vue 3

Using bootstrap 5 modal, everything works fine, except I don't understand how to get focus() to work.

<template>
  <button @click="showModal()" class="btn btn-primary">Add Todo</button>

  <div
    class="modal fade"
    id="addTodoModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <form
          @submit.prevent="
            form.post('todos', {
              form,
              onSuccess: () => {
                form.reset();
                this.myModal.hide();
              },
            })
          "
        >
          <div class="modal-body">
            <label for="exampleFormControlInput1" class="form-label"
              >Title</label
            >
            <input
              ref="titleInput"
              v-model="form.title"
              v-bind:class="{ 'is-invalid': form.errors.title }"
              type="text"
              class="form-control"
            />
            <div class="invalid-feedback">{{ form.errors.title }}</div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button
              type="submit"
              class="btn btn-primary"
              :disabled="form.processing"
            >
              Add
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { useForm } from "@inertiajs/inertia-vue3";

const { Modal } = bootstrap;

export default {
  setup() {
    const form = useForm({
      title: null,
    });

    var myModal = null;

    return { form, myModal };
  },

  methods: {
    showModal() {
      this.myModal = new Modal(document.getElementById("addTodoModal"), {});
      this.myModal.show();

      this.$refs.titleInput.focus();
    },
  },
};
</script>