title: render a Vue slot in a layout from component
body: <p>I'm having problems with a named slot. This seems like it should work. In the code below I'm trying to use a named slot "sidebar". I would expect my sidebar slot content to show up between the Sidebar starts and Sidebar ends text but nothing shows up in that slot. Everything renders in the main slot.</p>
  
  <p>Here's my code.</p>
  
  <p>route...</p>
  
  <pre><code>{
    path: "/test",
    name: "test",
    meta: {
      layout: "test-layout"
    },
    component: () =&gt;
      import("@/pages/Test.vue")
  },
  </code></pre>
  
  <p>and App.vue template...</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;component  :is="layout"&gt;
        &lt;router-view /&gt;
      &lt;/component&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and test-layout...</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;h1&gt;Sidebar starts&lt;/h1&gt;
        &lt;slot name="sidebar"/&gt;
        &lt;h1&gt;Sidebar ends&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt;Content starts&lt;/h1&gt;
        &lt;slot/&gt;
        &lt;h1&gt;Content ends&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and page Test.vue...</p>
  
  <pre><code>&lt;template&gt;
    &lt;test-layout&gt;
      &lt;span slot="sidebar"&gt;sidebar slot content {{forecast.todaySummary}}&lt;/span&gt;
      &lt;div&gt;main slot content {{forecast.currentSummary}}&lt;/div&gt;
    &lt;/test-layout&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import api from "@/js/web-services";
  export default {
    data() {
      return {
        forecast: null
      };
    },
    created() {
      api.getDailyForecast().then(response =&gt; {
        this.forecast = response.data;
      });
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>and the import in my main.js</p>
  
  <pre><code>import TestLayout from "./layouts/test-layout.vue";
  Vue.component('test-layout', TestLayout);
  </code></pre>
  
  <p>Why isn't my sidebar slot working?</p>
  
  <p>UPDATE</p>
  
  <p>If I get rid of the two lines in main.js and add </p>
  
  <pre><code>import TestLayout from "@/layouts/test-layout.vue";
  </code></pre>
  
  <p>and </p>
  
  <pre><code>export default {
    components: { TestLayout },
  
    data() {...
  </code></pre>
  
  <p>to Test.vue then it works.</p>