Javascript调整画布大小并自动获取div大小

Question

当窗口大小发生变化时，我正在使用 javascript 来调整画布对象的大小。在我切换到移动设备视图之前，它工作正常。

示例正常：

现在是移动设备的示例：

vue文件代码：

<template>
  <div>
    <Loader />
    <Navbar />
    <Header />
    <div class="content-grid full">
      <canvas
        ref="game"
        @click="positionUpdate"
        v-bind:width="width"
        v-bind:height="height"
      ></canvas>
      <div class="form-input small textchat">
        <input
          autocomplete="off"
          autocorrect="off"
          type="text"
          id="friends-search"
          name="friends_search"
          placeholder="Enter message.."
        />
        <button class="button primary">
          <svg class="icon-big-arrow" style="fill:#fff;">
            <use xlink:href="#svg-big-arrow"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Loader from "../template/Loader.vue";
import Navbar from "../template/Navbar.vue";
import Header from "../template/Header.vue";
import io from "socket.io-client";

export default {
  name: "World",
  data: function() {
    return {
      socket: {},
      context: {},
      height: 0,
      width: 0,
    };
  },
  components: {
    Loader,
    Navbar,
    Header,
  },
  created() {
    this.socket = io("http://localhost:3000");
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);

    this.context = this.$refs.game.getContext("2d");
    this.handleResize();

    this.socket.on("newPositions", (data) => {
      this.context.clearRect(
        0,
        0,
        this.$refs.game.width,
        this.$refs.game.height
      );

      this.context.fillStyle = "rgb(97,93,250)";
      this.context.beginPath();

      for (var i = 0; i < data.length; i++) {
        this.context.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2);
      }

      this.context.closePath();
      this.context.fill();
    });
  },
  methods: {
    handleResize: function() {
      this.height = window.innerHeight - 81;
      this.width = window.innerWidth - 48;
    },
    positionUpdate: function(event) {
      this.socket.emit("positionUpdate", {
        x: event.pageX - this.context.canvas.offsetLeft,
        y: event.pageY - this.context.canvas.offsetTop,
        state: true,
      });
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style scoped>
canvas {
  background-color: #e6e6e6;
  margin: 0px;
  padding: 0px;
}

.textchat {
  width: 90%;
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 2%;
  position: absolute;
  bottom: 0;
}
</style>

说明：我减少了高度的像素，因为顶部栏是 81px，宽度是因为左侧边栏。在移动设备上更改为更小的尺寸。

问题：如何自动获取这些 div 元素的宽度和高度？