SOURCE

new Vue({
    el: '#app',
    data: {
        window: {
            width: 0,
            height: 0
        }
    },
    created() {
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    },
    destroyed() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            this.window.width = window.innerWidth;
            this.window.height = window.innerHeight;
        }
    }
});

<script src="https://s3.pstatp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js"></script>
<div id="app">
    <section class="section has-text-centered">
        <h1 class="title is-1">
            Your Window
        </h1>
        <h3 class="title is-3">
            Width: {{ window.width }} px<br/>
            Height: {{ window.height }} px
        </h3>
        <p class="has-text-white">
            ↑<br/>
            ← resize window →<br/>
            ↓
        </p>
    </section>
</div>

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css");
html,
body,
#app,
section.section {
  height: 100%;
}

body {
  background: -webkit-linear-gradient(yellow, tomato);
  background: -o-linear-gradient(yellow, tomato);
  background: -moz-linear-gradient(yellow, tomato);
  background: linear-gradient(yellow, tomato);
}

section.section {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.title {
  color: white;
}