Media queries or different components in a Vue project for responsiveness?

Question

Layout

Site on Vue js
Now I am making the site adaptive for different devices
Now I made adaptability for tablets (992 px) using different components, not copper requests and I ran into such a problem: I am resizing in the developer tools and the layout changes only if I reload the page, that is the component for flatbed layout will be applied only after reloading the page
. If everything is done on media queries, without using different components, then the adaptive layout is applied immediately when resizing in the developer tools
It turns out that using media queries is better, since I see changes on the fly

What is the best practice for Vue JS projects? Using different components or media queries?

I used the components like this:

<Header v-if="!tabletView" />
    <HeaderTablet v-else />

<script>
import Header from "../components/Header";
import HeaderTablet from "../components/Responsive/HeaderTablet";

export default {
  name: "Home",
  components: {
    Header,  
    HeaderTablet
  },
data() {
    return {
      tabletView: false
    };
  },
methods: {
    handleView() {
      window.innerWidth <= 992
        ? (this.tabletView = true)
        : (this.tabletView = false);
    }
  },
  created() {
    this.handleView();
  }
}
</script>

Answer 1

I used a variant with the use of different components for adaptability and created a function call when resizing the window like this:

created() {
    this.handleView();
    window.addEventListener("resize", this.handleView);
    console.log(this.pageView);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleView);
    console.log(this.pageView);
  }