diff --git a/devui/quadrant-diagram/config.ts b/devui/quadrant-diagram/config.ts
index f5902f086711dbf95db7f14e9dcd2342e327990b..c89a9443fabb944eb60aed1846432de4825d9540 100644
--- a/devui/quadrant-diagram/config.ts
+++ b/devui/quadrant-diagram/config.ts
@@ -29,6 +29,10 @@ export const DEFAULT_QUADRANT_CONFIGS = [
   { title: '不重要不紧急' },
   { title: '不重要紧急' }
 ];
+export const DEFAULT_VIEW_CONFIGS = {
+  height: 900,
+  width: 950,
+}
 export const AXIS_TITLE_SPACE = 15;
 export const SMALL_LABEL_SIZE_CENTER_POINT = {
   x: 6, y: 6
diff --git a/devui/quadrant-diagram/src/components/axis/index.tsx b/devui/quadrant-diagram/src/components/axis/index.tsx
index f7353d000e7d83f8eb240a2b59036e853f2fc75d..0e0d7d398df2b988f0d6885d3c12bf07f024d518 100644
--- a/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -1,22 +1,22 @@
-import { defineComponent, toRefs, onMounted, ExtractPropTypes, reactive, ref } from 'vue'
-import { IViewConfigs, IAxisConfigs } from '../../../type';
-import { AXIS_TITLE_SPACE } from '../../../config';
-import { quadrantDiagramAxisProps } from './types'
-import { debounce } from 'lodash';
+import { defineComponent, toRefs, onMounted, ExtractPropTypes, reactive, ref, watch } from 'vue'
+import { IViewConfigs, IAxisConfigs } from '../../../type'
+import { AXIS_TITLE_SPACE } from '../../../config'
+import { quadrantDiagramAxisProps, QuadrantDiagramAxisProps } from './types'
+import { debounce } from 'lodash'
 
 import './index.scss'
 
-const Axis = defineComponent({
+export default defineComponent({
   name: 'DQuadrantDiagramAxis',
   props: quadrantDiagramAxisProps,
-  setup(props: ExtractPropTypes<typeof quadrantDiagramAxisProps>) {
+  setup(props: QuadrantDiagramAxisProps) {
 
-    const { diagramId, view, axisConfigs } = toRefs(props);
-    const AXIS_COLOR = ref('#0000ff');
-    const AXIS_LABEL_COLOR = ref('#ff0000');
+    const { diagramId, view, axisConfigs } = toRefs(props)
+    const AXIS_COLOR = ref('#0000ff')
+    const AXIS_LABEL_COLOR = ref('#ff0000')
 
-    const quadrantAxis = ref();
-    const context = ref();
+    const quadrantAxis = ref()
+    const context = ref()
     const axisInnerAttr = reactive({
       axisOrigin: {
         x: 0,
@@ -32,179 +32,185 @@ const Axis = defineComponent({
       yTickSpacing: 0,
     })
 
-    const axisConfigsVal: IAxisConfigs = axisConfigs.value;
-    const viewVal: IViewConfigs = view.value;
+    const axisConfigsVal: IAxisConfigs = axisConfigs.value
+    const viewVal: IViewConfigs = view.value
 
 
     onMounted(() => {
-      resetAxis();
-    });
+      resetAxis()
+    })
+    
+    watch(viewVal, () => {
+      resetAxis()
+    })
 
     const resetAxis = debounce(() => {
-      initAxisData();
-      setAxisData();
-      drawAxis();
-      drawAxisLabels();
-    }, 200);
+      initAxisData()
+      setAxisData()
+      drawAxis()
+      drawAxisLabels()
+    }, 200)
 
     /**
      * 获取 canvas 并赋值宽高
      */
     const initAxisData = () => {
-      quadrantAxis.value = document.querySelector('#devui-quadrant-axis-' + diagramId.value);
-      quadrantAxis.value.width = viewVal.width;
-      quadrantAxis.value.height = viewVal.height;
+      quadrantAxis.value = document.querySelector('#devui-quadrant-axis-' + diagramId.value)
+      quadrantAxis.value.width = viewVal.width
+      quadrantAxis.value.height = viewVal.height
     }
 
     const setAxisData = () => {
-      context.value = quadrantAxis.value.getContext('2d');
-      axisInnerAttr.axisOrigin = axisConfigsVal.axisOrigin;
-      axisInnerAttr.axisTop = axisConfigsVal.axisTop;
-      axisInnerAttr.axisRight = axisConfigsVal.axisRight;
-      axisInnerAttr.axisWidth = axisConfigsVal.axisWidth;
-      axisInnerAttr.axisHeight = axisConfigsVal.axisHeight;
-      axisInnerAttr.yAxisTicksNum = axisConfigsVal.yAxisTicksNum;
-      axisInnerAttr.xAxisTicksNum = axisConfigsVal.xAxisTicksNum;
-      axisInnerAttr.xTickSpacing = axisConfigsVal.xTickSpacing;
-      axisInnerAttr.yTickSpacing = axisConfigsVal.yTickSpacing;
+      context.value = quadrantAxis.value.getContext('2d')
+      axisInnerAttr.axisOrigin = axisConfigsVal.axisOrigin
+      axisInnerAttr.axisTop = axisConfigsVal.axisTop
+      axisInnerAttr.axisRight = axisConfigsVal.axisRight
+      axisInnerAttr.axisWidth = axisConfigsVal.axisWidth
+      axisInnerAttr.axisHeight = axisConfigsVal.axisHeight
+      axisInnerAttr.yAxisTicksNum = axisConfigsVal.yAxisTicksNum
+      axisInnerAttr.xAxisTicksNum = axisConfigsVal.xAxisTicksNum
+      axisInnerAttr.xTickSpacing = axisConfigsVal.xTickSpacing
+      axisInnerAttr.yTickSpacing = axisConfigsVal.yTickSpacing
     }
 
     /** 
      * 执行绘制 
      */
     const drawAxis = () => {
-      context.value.save();
-      context.value.fillStyle = AXIS_COLOR.value;
-      context.value.strokeStyle = AXIS_COLOR.value;
-      drawXAxis();
-      drawYAxis();
-      context.value.lineWidth = 0.5;
-      drawXAxisTicks();
-      drawYAxisTicks();
-      context.value.restore();
+      context.value.save()
+      context.value.fillStyle = AXIS_COLOR.value
+      context.value.strokeStyle = AXIS_COLOR.value
+      drawXAxis()
+      drawYAxis()
+      context.value.lineWidth = 0.5
+      drawXAxisTicks()
+      drawYAxisTicks()
+      context.value.restore()
     }
 
     /**
      * 绘制 XY 轴
      */
     const drawYAxis = () => {
-      context.value.beginPath();
-      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y);
-      context.value.lineTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin);
-      context.value.stroke();
-      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin);
-      context.value.lineTo(axisInnerAttr.axisOrigin.x + 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10);
-      context.value.lineTo(axisInnerAttr.axisOrigin.x - 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10);
-      context.value.fill();
+      context.value.beginPath()
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y)
+      context.value.lineTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin)
+      context.value.stroke()
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin)
+      context.value.lineTo(axisInnerAttr.axisOrigin.x + 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10)
+      context.value.lineTo(axisInnerAttr.axisOrigin.x - 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10)
+      context.value.fill()
 
     }
     const drawXAxis = () => {
-      context.value.beginPath();
-      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y);
-      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y);
-      context.value.stroke();
+      context.value.beginPath()
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y)
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y)
+      context.value.stroke()
       // 绘制坐标轴三角形
-      context.value.moveTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin, axisInnerAttr.axisOrigin.y);
-      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y + 5);
-      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y - 5);
-      context.value.fill();
+      context.value.moveTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin, axisInnerAttr.axisOrigin.y)
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y + 5)
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y - 5)
+      context.value.fill()
     }
 
     /**
      * 绘制轴线刻度
      */
     const drawXAxisTicks = () => {
-      let deltaY;
+      let deltaY: number
       for (let i = 1; i < axisInnerAttr.xAxisTicksNum; i++) {
-        context.value.beginPath();
+        context.value.beginPath()
         // 判断显示长刻度还是短刻度
         if (i % axisConfigsVal.xAxisRange.step === 0) {
-          deltaY = axisConfigsVal.tickWidth;
+          deltaY = axisConfigsVal.tickWidth
         } else {
-          deltaY = axisConfigsVal.tickWidth / 2;
+          deltaY = axisConfigsVal.tickWidth / 2
         }
         context.value.moveTo(axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing,
-          axisInnerAttr.axisOrigin.y - deltaY);
+          axisInnerAttr.axisOrigin.y - deltaY)
         context.value.lineTo(axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing,
-          axisInnerAttr.axisOrigin.y + deltaY);
-        context.value.stroke();
+          axisInnerAttr.axisOrigin.y + deltaY)
+        context.value.stroke()
       }
 
     }
     const drawYAxisTicks = () => {
-      let deltaX;
+      let deltaX: number
       for (let i = 1; i < axisInnerAttr.yAxisTicksNum; i++) {
-        context.value.beginPath();
+        context.value.beginPath()
         if (i % axisConfigsVal.yAxisRange.step === 0) {
-          deltaX = axisConfigsVal.tickWidth;
+          deltaX = axisConfigsVal.tickWidth
         } else {
-          deltaX = axisConfigsVal.tickWidth / 2;
+          deltaX = axisConfigsVal.tickWidth / 2
         }
         context.value.moveTo(axisInnerAttr.axisOrigin.x - deltaX,
-          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing)
         context.value.lineTo(axisInnerAttr.axisOrigin.x + deltaX,
-          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
-        context.value.stroke();
+          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing)
+        context.value.stroke()
       }
     }
-
+    /**
+     * 绘制轴线标签
+     */
     const drawAxisLabels = () => {
-      context.value.save();
-      context.value.fillStyle = AXIS_LABEL_COLOR.value;
-      drawXTicksLabels();
-      drawYTicksLabels();
-      context.value.restore();
-      drawAxisTitle();
+      context.value.save()
+      context.value.fillStyle = AXIS_LABEL_COLOR.value
+      drawXTicksLabels()
+      drawYTicksLabels()
+      context.value.restore()
+      drawAxisTitle()
     }
 
     const drawXTicksLabels = () => {
-      context.value.textAlign = 'center';
-      context.value.textBaseline = 'top';
+      context.value.textAlign = 'center'
+      context.value.textBaseline = 'top'
       for (let i = 0; i <= axisInnerAttr.xAxisTicksNum; i++) {
         if (i % axisConfigsVal.xAxisRange.step === 0) {
           context.value.fillText(i, axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing,
-            axisInnerAttr.axisOrigin.y + axisConfigsVal.spaceBetweenLabelsAxis);
+            axisInnerAttr.axisOrigin.y + axisConfigsVal.spaceBetweenLabelsAxis)
         }
       }
-    };
+    }
     const drawYTicksLabels = () => {
-      context.value.textAlign = 'center';
-      context.value.textBaseline = 'middle';
+      context.value.textAlign = 'center'
+      context.value.textBaseline = 'middle'
       for (let i = 0; i <= axisInnerAttr.yAxisTicksNum; i++) {
         if (i % axisConfigsVal.yAxisRange.step === 0) {
           context.value.fillText(i, axisInnerAttr.axisOrigin.x - axisConfigsVal.spaceBetweenLabelsAxis,
-            axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+            axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing)
         }
       }
-    };
+    }
     const drawAxisTitle = () => {
-      context.value.font = '12px Microsoft YaHei';
-      context.value.textAlign = 'left';
-      context.value.fillStyle = AXIS_LABEL_COLOR.value;
-      const xLabelWidth = context.value.measureText(axisConfigsVal.xAxisLabel).width;
+      context.value.font = '12px Microsoft YaHei'
+      context.value.textAlign = 'left'
+      context.value.fillStyle = AXIS_LABEL_COLOR.value
+      const xLabelWidth = context.value.measureText(axisConfigsVal.xAxisLabel).width
       rotateLabel(axisConfigsVal.xAxisLabel, axisInnerAttr.axisRight + axisConfigsVal.axisMargin / 2,
-        axisInnerAttr.axisOrigin.y - xLabelWidth - AXIS_TITLE_SPACE);
+        axisInnerAttr.axisOrigin.y - xLabelWidth - AXIS_TITLE_SPACE)
       context.value.fillText(axisConfigsVal.yAxisLabel,
-        axisInnerAttr.axisOrigin.x + AXIS_TITLE_SPACE, axisInnerAttr.axisTop - axisConfigsVal.axisMargin / 2);
-    };
+        axisInnerAttr.axisOrigin.x + AXIS_TITLE_SPACE, axisInnerAttr.axisTop - axisConfigsVal.axisMargin / 2)
+    }
 
     const rotateLabel = (name: string, x: number, y: number) => {
       for (let i = 0; i < name.length; i++) {
-        const str = name.slice(i, i + 1).toString();
+        const str = name.slice(i, i + 1).toString()
         if (str.match(/[A-Za-z0-9]/)) {
-          context.value.save();
-          context.value.translate(x, y);
-          context.value.rotate(Math.PI / 180 * 90);
-          context.value.textBaseline = 'bottom';
-          context.value.fillText(str, 0, 0);
-          context.value.restore();
-          y += context.value.measureText(str).width;
+          context.value.save()
+          context.value.translate(x, y)
+          context.value.rotate(Math.PI / 180 * 90)
+          context.value.textBaseline = 'bottom'
+          context.value.fillText(str, 0, 0)
+          context.value.restore()
+          y += context.value.measureText(str).width
         } else if (str.match(/[\u4E00-\u9FA5]/)) {
-          context.value.save();
-          context.value.textBaseline = 'top';
-          context.value.fillText(str, x, y);
-          context.value.restore();
-          y += context.value.measureText(str).width;
+          context.value.save()
+          context.value.textBaseline = 'top'
+          context.value.fillText(str, x, y)
+          context.value.restore()
+          y += context.value.measureText(str).width
         }
       }
     }
@@ -212,13 +218,11 @@ const Axis = defineComponent({
 
   },
   render() {
-    const { diagramId } = this;
+    const { diagramId } = this
     return (
       <div>
         <canvas id={'devui-quadrant-axis-' + diagramId}></canvas>
       </div>
-    );
+    )
   }
-})
-
-export default Axis;
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/devui/quadrant-diagram/src/components/axis/types.ts b/devui/quadrant-diagram/src/components/axis/types.ts
index e22f059ed952e1fea802bb2a6fb6d1492aed35a6..c6c84fdd4d1ebfa8f5bd75c5cec6e3da77ec2341 100644
--- a/devui/quadrant-diagram/src/components/axis/types.ts
+++ b/devui/quadrant-diagram/src/components/axis/types.ts
@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { IViewConfigs, IAxisConfigs } from '../../../type';
+import { IViewConfigs, IAxisConfigs } from '../../../type'
 
 export const quadrantDiagramAxisProps = {
   diagramId: {
diff --git a/devui/quadrant-diagram/src/quadrant-diagram-types.ts b/devui/quadrant-diagram/src/quadrant-diagram-types.ts
index 3513e64f531df83a44387dd77b6b03e976b3f135..26f9e8df2362547839327b3ae32aaf92ee4d45b6 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram-types.ts
+++ b/devui/quadrant-diagram/src/quadrant-diagram-types.ts
@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { DEFAULT_AXIS_CONFIGS } from '../config';
-import { IViewConfigs, IAxisConfigs } from '../type';
+import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../config'
+import { IViewConfigs, IAxisConfigs } from '../type'
 
 export const quadrantDiagramProps = {
   diagramId: {
@@ -13,7 +13,7 @@ export const quadrantDiagramProps = {
   },
   view: {
     type: Object as PropType<IViewConfigs>,
-    default: { height: 720, width: 720 },
+    default: DEFAULT_VIEW_CONFIGS,
   },
 } as const
 
diff --git a/devui/quadrant-diagram/src/quadrant-diagram.tsx b/devui/quadrant-diagram/src/quadrant-diagram.tsx
index d5506a13465643435576d2673782ec8980542766..27b01404ce9247110fd8e54b69a3200f33133ac5 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram.tsx
@@ -1,17 +1,17 @@
-import { defineComponent, toRefs, ref, onMounted, reactive } from 'vue'
+import { defineComponent, toRefs, reactive, watch } from 'vue'
 import { quadrantDiagramProps, QuadrantDiagramProps } from './quadrant-diagram-types'
-import DQuadrantDiagramAxis from './components/axis';
-import { DEFAULT_AXIS_CONFIGS } from '../config';
+import DQuadrantDiagramAxis from './components/axis'
+import { DEFAULT_AXIS_CONFIGS } from '../config'
 
 export default defineComponent({
   name: 'DQuadrantDiagram',
   props: quadrantDiagramProps,
   emits: [],
-  setup(props, ctx) {
-    const { diagramId, axisConfigs, view } = toRefs(props);
+  setup(props: QuadrantDiagramProps) {
+    const { diagramId, axisConfigs, view } = toRefs(props)
 
-    const axisConfigsVal = axisConfigs.value;
-    const viewVal = view.value;
+    const axisConfigsVal = axisConfigs.value
+    const viewVal = view.value
 
     const calAxisConfig = reactive({
       axisOrigin: { x: null, y: null },
@@ -26,36 +26,40 @@ export default defineComponent({
     })
 
     const initAxisData = () => {
-      const axisConfigKeys = Object.keys(DEFAULT_AXIS_CONFIGS);
+      const axisConfigKeys = Object.keys(DEFAULT_AXIS_CONFIGS)
       for (let i = 0; i < axisConfigKeys.length; i++) {
         if (calAxisConfig[axisConfigKeys[i]] === undefined) {
-          calAxisConfig[axisConfigKeys[i]] = DEFAULT_AXIS_CONFIGS[axisConfigKeys[i]];
+          calAxisConfig[axisConfigKeys[i]] = DEFAULT_AXIS_CONFIGS[axisConfigKeys[i]]
         }
       }
       calAxisConfig.axisOrigin = {
         x: axisConfigsVal.originPosition.left,
         y: viewVal.height - axisConfigsVal.originPosition.bottom
-      };
-      calAxisConfig.axisTop = axisConfigsVal.axisMargin;
-      calAxisConfig.axisRight = viewVal.width - axisConfigsVal.axisMargin;
-      calAxisConfig.axisWidth = calAxisConfig.axisRight - calAxisConfig.axisOrigin.x;
-      calAxisConfig.axisHeight = calAxisConfig.axisOrigin.y - calAxisConfig.axisTop;
-      calAxisConfig.yAxisTicksNum = axisConfigsVal.yAxisRange.max - axisConfigsVal.yAxisRange.min;
-      calAxisConfig.xAxisTicksNum = axisConfigsVal.xAxisRange.max - axisConfigsVal.xAxisRange.min;
-      calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum;
-      calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum;
+      }
+      calAxisConfig.axisTop = axisConfigsVal.axisMargin
+      calAxisConfig.axisRight = viewVal.width - axisConfigsVal.axisMargin
+      calAxisConfig.axisWidth = calAxisConfig.axisRight - calAxisConfig.axisOrigin.x
+      calAxisConfig.axisHeight = calAxisConfig.axisOrigin.y - calAxisConfig.axisTop
+      calAxisConfig.yAxisTicksNum = axisConfigsVal.yAxisRange.max - axisConfigsVal.yAxisRange.min
+      calAxisConfig.xAxisTicksNum = axisConfigsVal.xAxisRange.max - axisConfigsVal.xAxisRange.min
+      calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum
+      calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum
     }
 
-    initAxisData();
+    initAxisData()
+
+    watch(viewVal, () => {
+      initAxisData()
+    })
 
-    return { diagramId, calAxisConfig, viewVal };
+    return { diagramId, calAxisConfig, }
   },
   render() {
-    const { diagramId, calAxisConfig, viewVal } = this;
+    const { diagramId, calAxisConfig, view } = this
 
     return (
       <div class="devui-quadrant-diagram" id={diagramId}>
-        <DQuadrantDiagramAxis diagramId={diagramId} axisConfigs={calAxisConfig} view={viewVal} />
+        <DQuadrantDiagramAxis diagramId={diagramId} axisConfigs={calAxisConfig} view={view} />
       </div>
     )
   }
diff --git a/sites/components/quadrant-diagram/index.md b/sites/components/quadrant-diagram/index.md
index 8a3e8f62cc821e67d3ce387c8bc575ec314e4f9b..34ae985470b2620e74d31cd7bf261ffb2dea0008 100644
--- a/sites/components/quadrant-diagram/index.md
+++ b/sites/components/quadrant-diagram/index.md
@@ -13,7 +13,32 @@
 :::demo
 
 ```vue
-<d-quadrant-diagram />
+<template>
+  <d-quadrant-diagram :view='view'/>
+  <d-button @click='handle'/>
+</template>
+
+
+<script>
+import { defineComponent, reactive } from 'vue'
+
+export default ({
+  setup() {
+    const view = reactive({
+      height: 200,
+      width: 200,
+    });
+    const handle = () => {
+      view.height = 400;
+      view.width = 400;
+    };
+    return {
+      handle,
+      view,
+    }
+  }
+})
+</script>
 ```
 
 :::