I am trying to create a simple field with a tooltip using the Bootstrap something like this:

But for some reason, I am unable to create within my Vuejs/Nuxtjs project. I was able to find the code example where they are using the jQuery but was unable to convert it to my Vuejs/Nuxtjs code.

Can someone please let me know how can I create something similar within my Vuejs/Nuxtjs?

Following is the code sample for jQuery: http://www.java2s.com/Tutorials/HTML_CSS/Bootstrap_Example/Tooltip/Add_tooltip_to_info_icon.htm

Following is the code I have in my Vuejs/Nuxtjs project:

<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>

I am currently using the Bootstrap Version ^4.6.1 and able to create all Bootstrap button and other things which seems to be working as required. But only this one is not working for me.