[Vuejs]-I want to change Vue components with media Queries

You do not want to use CSS to hide. The beauty of Vue is that in the case of mobile, the code will not even be generated at all.

Use a v-if directive, and add an isMobile property to your data, computed, store, etc. Or call a method to get it.

<app-footer v-if='!isMobile'></app-footer>

For the header, there are 2 ways. Using a component element with v-bind:is to swap in the correct one, or using v-if and v-else

<app-header v-if='!isMobile'></app-header>
<app-header-mobile v-else></app-header-mobile>

Here is the official link to the Vue dynamic component approach.
https://v2.vuejs.org/v2/guide/components-dynamic-async.html.

It would look like this:

 <component v-bind:is="currentHeaderComponent"></component>

In this case, you would set currentHeaderComponent based on your conditions.

If you insist on CSS and media queries for the footer, set the component id or class, and that in your CSS

Component

<app-header id='app-header'></app-header>
<router-view></router-view>
<app-footer id='app-footer'></app-footer>

CSS

#app-footer {display: none;}