Почему не отрабатывает примесь в vue.js?

Question

[Дима Паутов]

Привет, ребята. Помогите понять, что не так. Создал примесь. Нужна она, что бы в разных местах скрывать или отображать нужные компоненты

breakPoints.js

export default {
	data(){
		return {
			large: false,
			middle: false,
			small: false,
			xSmall: false,
			currentWidth: 0
		}
	},

	mounted(){
		window.addEventListener('load', () => this.detect());
		window.addEventListener('resize', () => this.detect());
	},

	methods: {
		detect(){

			let width = window.innerWidth;

			this.large = width <= 1069 && width > 819;
			this.middle = width <= 819 && width > 569;
			this.small = width <= 569 &&  width > 420;
			this.xSmall = width <= 420;
			this.currentWidth = width;

		}
	}
}

Вставляю её так:

import Toolbar from '~/components/toolbar'
import ToolbarFixed from '~/components/toolbarFixed'
import AppHeader from '~/components/header'
import Subscribe from '~/components/subscribe'
import AppFooter from '~/components/footer'
import Icons from '~/components/icons'

import BreakPointsMixin from '~/mixins/breakPoints'

export default {
	mixins: [BreakPointsMixin],
	components: {
		Toolbar,
		ToolbarFixed,
		AppHeader,
		Subscribe,
		AppFooter,
		Icons
	},
	mounted(){
		console.log({
			large: this.large,
			middle: this.middle,
			small:  this.small,
			xSmall:  this.xSmall,
			currentWidth: this.currentWidth
		});
	}
}

Что бы вложенные в этот компонент компоненты я могу рендерить в зависимости от размера экрана. Но в консоль выводятся дефолтные значения из примеси.

Comments

[lavezzi1]

Попробуйте в breakPoints.js вешать обработчики в хуке created(), а не в mounted().

[Дима Паутов]

lavezzi1, в хуке created не доступно window. Но я нашёл решение. Нужно это

window.addEventListener('load', () => this.detect());

заменить на это this.detect();Моunted уже можно считать загрузкой страницы, т.к. dom готов