title: How can add bootstrap tooltip inside Vue.js
body: <p>I have a page for listing data from table using Vue.js and Laravel. Listing data is successful. Delete and edit function is going on. For that purpose I have added two <code>&lt;span&gt; (glyphicon-pencil), &lt;span&gt; (glyphicon-trash)</code>. If both <code>&lt;span&gt;</code> are outside the <code>&lt;template&gt;</code>tooltip shows, otherwise it doesn't works. Do you know how bootstrap tooltip works inside Vue Js. Thanks.</p>
  
  <p><strong>page.blade.php</strong></p>
  
  <pre><code>    &lt;template id="tasks-template"&gt;
         &lt;table class="table table-responsive table-bordered table-hover"&gt;
              &lt;thead&gt;
                     &lt;tr&gt;
                     &lt;th&gt;#&lt;/th&gt;
                     &lt;th&gt;Id&lt;/th&gt;
                     &lt;th&gt;Religion&lt;/th&gt;
                     &lt;th&gt;Action&lt;/th&gt;
                     &lt;th&gt;Created&lt;/th&gt;
                     &lt;td&gt;Status&lt;/td&gt;
                 &lt;/tr&gt;
             &lt;/thead&gt;
  
        &lt;tbody&gt;
               &lt;tr v-for="(index, task) in list"&gt;
               &lt;td&gt;&lt;input type="checkbox" id="checkbox" aria-label="checkbox" value="checkbox"&gt;&lt;/td&gt;
               &lt;td&gt;@{{ index + 1 }}&lt;/td&gt;
              &lt;td&gt;@{{ task.religion | capitalize }}&lt;/td&gt;
             &lt;td v-if="task.status == 'publish'"&gt;
                       &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
             &lt;/td&gt;
             &lt;td v-else&gt;
                       &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
             &lt;/td&gt;
             &lt;td&gt;@{{ task.created_at }}&lt;/td&gt;
             &lt;td&gt;
                 &lt;span class="glyphicon glyphicon-pencil" aria-hidden="true" data-toggle="tooltip" data-placement="left" title="Edit"&gt;&lt;/span&gt; 
                 &lt;span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Delete"&gt;&lt;/span&gt;
             &lt;/td&gt;
           &lt;/tr&gt;
         &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/template&gt;
  
          &lt;tasks&gt;&lt;/tasks&gt; 
  @push('scripts')
      &lt;script src="/js/script.js"&gt;&lt;/script&gt;
  @endpush 
  </code></pre>
  
  <p><strong>scripts.js</strong></p>
  
  <pre><code>$(function () {
      $('[data-toggle="tooltip"]').tooltip()
  })
  
  
  Vue.component('tasks', {
  
      template: '#tasks-template',
  
      data: function(){
          return{
              list: []
          };
      },
  
      created: function(){
          this.fetchTaskList();
      },
  
      methods: {
          fetchTaskList: function(){
              this.$http.get('/backend/religion/data', function(tasks){
                  this.$set('list', tasks);
              });
          }
      }
  
  });
  
  new Vue({
     el: 'body'
  });
  </code></pre>