title: Can PortalVue be used across several Vue.js single file components?
body: <p>Currently I'm working on Vue.js (single file components) and found three ways to pass data around: local state/props, store and <a href="https://markus.oberlehner.net/images/2018-05-27/should-i-store-this-data-in-vuex-flow-chart.png" rel="nofollow noreferrer">PortalVue</a>. During my experiment with PortalVue, my only success was implementing both <strong>portal</strong> and <strong>portal-target</strong> within one same .vue file, while attempts using <strong>portal</strong> and <strong>portal-target</strong> across two .vue files did not work.</p>
  <p>It was stated in PortalVue <a href="https://linusborg.github.io/portal-vue/#/guide" rel="nofollow noreferrer">documentation</a> that &quot;<em>PortalVue is a set of two components that allow you to render a component's template (or a part of it) anywhere in the document - even outside the part controlled by your Vue App!</em>&quot;</p>
  <p>Does that means PortalVue only work when both portal components reside in same file?</p>
  <p><strong>It works within one component</strong></p>
  <p>ComponentA.vue:</p>
  <pre><code>&lt;portal to=&quot;destination&quot;&gt;
    &lt;p&gt;Send this to destination&lt;/p&gt;
  &lt;/portal&gt;
  
  &lt;portal-target name=&quot;destination&quot;&gt;
  &lt;/portal-target&gt;
  </code></pre>
  <p><strong>While this doesn't render</strong></p>
  <p>ComponentA.vue:</p>
  <pre><code>&lt;portal to=&quot;destination&quot;&gt;
    &lt;p&gt;Send this to destination&lt;/p&gt;
  &lt;/portal&gt;
  </code></pre>
  <p>ComponentB.vue:</p>
  <pre><code>&lt;portal-target name=&quot;destination&quot;&gt;
  &lt;/portal-target&gt;
  </code></pre>