将画布应用到我的Vue.js项目时出错

<template>
  <div>
    <canvas ref="myCanvas" width="500" height="500"></canvas>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const myCanvas = ref(null);

    onMounted(() => {
      const canvas = myCanvas.value;
      if (canvas) {
        const ctx = canvas.getContext('2d');
        if (ctx) {
          // 绘制一个简单的矩形
          ctx.fillStyle = 'blue';
          ctx.fillRect(10, 10, 100, 100);
        } else {
          console.error('无法获取2D绘图上下文');
        }
      } else {
        console.error('画布元素未找到');
      }
    });

    return {
      myCanvas
    };
  }
};
</script>

<style>
/* 确保画布不被其他样式影响 */
canvas {
  border: 1px solid black;
}
</style>