title: Access modal that is in another component in vuejs
body: <p>I'm starting to work with vuejs. I have downloaded a template to start the development of a system; everything was right until I wanted to use a modal. It is in a component called baseLayout.vue and I tried to use it in a method in another component. Is it possible that I can manipulate it from another component? I want to open it, update the body with other elements. A fragment of my code is given below:</p>
  
  <p>baseLayout.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;b-modal id="modal1" ref="modal1" title="Bootstrap-Vue"&gt;
      &lt;p class="my-4"&gt;Hello from modal!&lt;/p&gt;
  &lt;/b-modal&gt;&lt;/template&gt;
  </code></pre>
  
  <p>I tried to use it from here Analytics.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;button class="btn-pill btn-shadow btn-wide fsize-1 btn btn-danger btn-lg" v-on:click="showModal()"&gt;ShowModal&lt;/button&gt;&lt;/template&gt;
  </code></pre>
  
  <p>In the scripts:</p>
  
  <pre><code>methods: {
    showModal(){
      this.$refs.modal1.show()
    }
  }
  </code></pre>
  
  <p>I can not find a way to manipulate the modal that is in the component. And I have to use it from there because if I put it in the current component, it is superimposed by the header and other elements.</p>