ブラウザのリサイズはwindowのイベントでVueが直接関与する部分ではないため、コンポーネントの作成時にイベントリスナを追加します。コンポーネント削除時には、忘れずにイベントリスナも削除します。
サンプルコード<template>
<p>window width: {{ width }}</p>
<p>window height: {{ height }}</p>
</template>
<script>
export default {
data: function () {
return {
width: window.innerWidth,
height: window.innerHeight
methods: {
handleResize: function() {
// resizeのたびにこいつが発火するので、ここでやりたいことをやる
this.width = window.innerWidth;
this.height = window.innerHeight;
mounted: function () {
window.addEventListener('resize', this.handleResize)
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
</script>
動作がモッサリするようならlodashの_.debounce
等を使用し、発火頻度を落とすと良いみたい。