What causes this failure to introduce a Bootstrap date picker in a Vue 3 app?

I am working on a Vue 3 and Bootstrap 5 app.

Needing a date picker that is compatible with Bootstrap, I choose bootstrap-datepicker. I installed it via yarn.

In main.js:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.js'   
import { createApp } from 'vue'
import router from 'vue-router'
import VueAxios from 'vue-axios'
import axios from 'axios'
import App from './App.vue'

createApp(App)
              .use(router)
              .use(VueAxios, axios)
              .provide('$apiBaseUrl', 'http://apisource.com/api')
              .mount('#app')

In components\Ui\DatepickerFrom.vue:

<template>
        <div class="input-group datepicker" id="date_from">
            <input type="text" class="form-control" />
            <span class="input-group-append">
                <span class="input-group-text icon d-block">
                    <i class="fa fa-calendar"></i>
                </span>
            </span>
        </div>
</template>

<script>
export default {
  name: 'DatepickerFrom',

  mounted() {
    document.getElementById('date_from').datepicker();
  }
}
</script>

UPDATE

in public/index.html I added, imediatelly before </body>:

<script src="<%= BASE_URL %>/node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="<%= BASE_URL %>/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script>
  (function(){
    $('#date_from').datepicker();
  })();
</script>

The problem persists.

The problem

Allthough, aparentlly, all the resources are available, the line document.getElementById('date_from').datepicker() throws this error in the console:

Uncaught TypeError: document.getElementById(...).datepicker is not a function

Where is my mistake?

from What causes this failure to introduce a Bootstrap date picker in a Vue 3 app?