title: VueJS dynamically mounting or attaching components based on responsiveness
body: <p>I have a question about VueJS and responsiveness. Let's assume I have the following template with a sidebar and the home component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;div class="row" style="margin-right:0px;"&gt;
              &lt;div class="sidebar col-md-2" style="position:fixed"&gt;
                  &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
              &lt;/div&gt;
              &lt;div class="col-md-10 col-md-offset-2"&gt;
                  &lt;app-home&gt;&lt;/app-home&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Sidebar from './components/Sidebar.vue';
      import Home from './components/Home.vue';
      export default {
          components: {
              appSidebar: Sidebar,
              appHome: Home
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Next thing I want to do is adding a third component, e.g. 'quickbar'. If the size is above 1000px, I want the 'quickbar' component to be added to sidebar col-md-2 div element, above the app-sidebar. If it's below 1000px I want the 'quickbar' component to be added to the col-md-10, below the app-home. What is the best approach for this? Adding the same component twice and using an @media css with display:none? How will this work?</p>