title: I want to change Vue components with media Queries
body: <p>In my App.vue I've set my template like this</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-view&gt;&lt;/router-view&gt;
  &lt;app-footer &gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p><code>app-header</code> sets a header component to every other component of my project (so I don't have to repeat myself). <code>app-footer</code> does the same, but with a common footer for all of my components.</p>
  
  <p>This works perfect with my Desktop web, but for Mobile I would like to change the header component to a <code>new-header.vue</code>component, and I would like to get rid of the Footer when using a mobile device so it doesn't use screenspace.</p>
  
  <p>How can I achieve this?  I tried to use <code>app-footer {display: none;}</code> in a media query at App.Vue but its not working.</p>