Estoy tratando de crear un campo simple con información sobre herramientas usando Bootstrap algo como esto:

Pero por alguna razón, no puedo crear dentro de mi proyecto Vuejs/Nuxtjs . Pude encontrar el ejemplo de código donde están usando jQuery pero no pude convertirlo a mi código Vuejs/Nuxtjs .

¿Puede alguien decirme cómo puedo crear algo similar dentro de mi Vuejs/Nuxtjs ?

El siguiente es el ejemplo de código para jQuery : http://www.java2s.com/Tutorials/HTML_CSS/Bootstrap_Example/Tooltip/Add_tooltip_to_info_icon.htm

El siguiente es el código que tengo en mi proyecto Vuejs/Nuxtjs :

 <template> <div> <span style="margin-top: 50px;"> Permissions </span> <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i> </div> </template> <script> export default { data () { return {} }, mounted () { } } </script> <style> </style>

Actualmente estoy usando la Bootstrap Version ^4.6.1 y puedo crear todos los botones de Bootstrap y otras cosas que parecen estar funcionando según sea necesario. Pero solo este no me funciona.