title: show a bootstrap modal which received on axios response after clicking the get modal button
body: <p>here is exactly what i need
  1 . when the user click the  button, the method is executed to get the bootstrap modal from the api.
  then show to the user.
  NB: initially the modal html should not be in the dom it is going to be created when the button is clicked.
  i have accomplished this in jquery but not in vue.
  Some code
  1 . calling the modal(bootstrapvue btn)</p>
  <pre><code>  &lt;b-button variant=&quot;success&quot; @click=&quot;getAssignform&quot;&gt;Assign&lt;/b-button&gt;
  </code></pre>
  <p>script</p>
  <pre><code>
  export default {
    data: function () {
      return {
        assigntoteamform: '',
        },
      }
    },
  
    methods: {
   
      getAssignform() {
  
          this.axios({
            method: &quot;get&quot;,
            url: &quot;/assignig/new/456reqform&quot;,
            headers: {
              Authorization: &quot;Bearer &quot; + localStorage.getItem(&quot;jkey&quot;),
            },
          })
            .then((response) =&gt; {
              **this.assigntoteamform =response.data;**
  
  
            })
            .then((
     *$(&quot;#assigntohandmodal&quot;).modal(&quot;show&quot;)*  //this is what i try but this will work on the next click
            ))
            .catch((error) =&gt; console.log(error))
            .finally(() =&gt; (this.loading = false));
  
      }
  };
  &lt;/script&gt;
  </code></pre>
  <p>binding the response to the html dom</p>
  <pre><code>&lt;span v-html=&quot;assigntoteamform&quot;&gt;&lt;/span&gt;
  </code></pre>
  <p>this is the modal from the inspect element i can see that it is appended as expected .</p>
  <pre><code>
  &lt;div id=&quot;assigntohandmodal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot; card-header modal-header&quot;&gt;
  
                  &lt;div class=&quot; modal-title&quot;&gt;Assign to a team&lt;/div&gt;
                  &lt;button type=&quot;button&quot; class=&quot;float-right close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot; d-flex justify-content-center modal-body&quot;&gt;
                  &lt;span id=&quot;form_result2&quot;&gt;&lt;/span&gt;
  
                  &lt;select class=&quot; btn-success dynamic&quot; name=&quot;team&quot;&gt;
                       @foreach($list as $team)&lt;option value=&quot;{{$team-&gt;team__id}}&quot;&gt;{{$team-&gt;team__name}}&lt;/option&gt;
                          @endforeach
                      &lt;/select&gt;
  
                       &lt;div class=&quot;form-group&quot; align=&quot;center&quot;&gt;
                               &lt;input type=&quot;hidden&quot; name=&quot;handleret&quot; id=&quot;handleret&quot; /&gt;
                               &lt;input type=&quot;hidden&quot; name=&quot;handleret&quot; id=&quot;handleret&quot; /&gt;
                               &lt;input type=&quot;hidden&quot; name=&quot;hidden_id&quot; id=&quot;hidden_id&quot; /&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class=&quot;d-flex justify-content-center modal-footer&quot;&gt;
                   &lt;button type=&quot;button&quot; id=&quot;distotechnicia&quot; class=&quot;subbb btn btn-success&quot;&gt;Ok&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>once again it is working with html but in vue this &quot; this.assigntoteamform =response.data;&quot; is excuited after this &quot;   $(&quot;#assigntohandmodal&quot;).modal(&quot;show&quot;)&quot; i want the reverse .</p>