[Vuejs]-Set the dynamic height and width to Konva Stage in Vue.js

You can use ResizeObserver or resize event from the window to detect size changes.

Here is a solution with ResizeObserver:

<template>
  <div class="container">
    <v-stage ref="stage" :config="stageSize">
      <v-layer>
        <v-circle
          :config="{
            x: stageSize.width / 2,
            y: stageSize.height / 2,
            radius: stageSize.width / 2,
            fill: 'green',
          }"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>
<script>
export default {
  data() {
    return {
      stageSize: {
        width: 10,
        height: 10,
      },
    };
  },
  mounted() {
    const container = document.querySelector(".container");
    const observer = new ResizeObserver(() => {
      this.stageSize.width = container.offsetWidth;
      this.stageSize.height = container.offsetHeight;
    });
    observer.observe(container);
  },
};
</script>

Demo: https://codesandbox.io/s/vue-konva-change-stage-size-or-resize-tbwec?file=/src/App.vue