Ребят подскажите про правильность моих действий я сейчас делаю адаптацию, и

у меня в проетке на мобильных устройствах вместо сайдбара стоит мобильная навигация внизу.

так вот, я хочу через v-if показывать или сайдбар или навигацию. с этим у меня проблем нет, я все сверстал и сделал.
дело в том, что у меня есть 2 лейаута, 1 без сайдбара (для страницы логина) а другой с сайдбаром (для всех страниц сайта), так вот, в каждой странице сайта есть обертка этим лейаутом с сайдбаром, а в ней уже контент, ну такая, стандартная практика, чтобы в App.vue мозги не делать.

дело в том, что я хочу все сделать максимально производительным, то есть по v-if, чтобы для телефонов не грузился код, который не нужен.

вот код этого лейаута:

<template>
<div class="layout-default">
<AppSidebar v-if="showSidebar"/>
<MobileNavigation v-else/>
<main>
<slot/>
</main>
</div>
</template>

<script>
import AppSidebar from './AppSidebar'
import MobileNavigation from './MobileNavigation'

export default {
name: 'LayoutDefault',

components: {
AppSidebar,
MobileNavigation
},

data () {
return {
showSidebar: true
}
},

created () {
window.addEventListener('resize', () => {
this.showSidebar = window.innerWidth > 991
})
}
}
</script>

а вот почему я спрашиваю: я в хуке created повесил обработчик ресайза на window, и при ресайзе присваивается значение переменной showSidebar, чтобы v-if работал.

но в этот лейаут обернуты все страницы, за исключением логина, и когда будет новый переход по странице, то получается будет вешаться новый обработчик на window?

Компонент же останется