vue-grid-layout调整isResizable大小，内部组件跟着变化

Vue Grid Layout是一个强大的基于网格的拖拽布局库，它允许你在Vue应用中动态地管理元素的位置和大小。如果你想要调整`isResizable`属性以改变某个区域的可调整性，并使得内部组件随之响应，你需要做以下几步：

1. 首先，在你的Vue组件中安装并引入Vue Grid Layout库，并配置好布局容器(`grid`)。

<template>
  <div ref="layout" :is-resizable="resizableArea" class="vue-grid-layout"></div>
</template>

<script>
import VueGridLayout from '@vue-grid-layout/core';
import '@vue-grid-layout/vue.css';

export default {
  components: { VueGridLayout },
  data() {
    return {
      resizableArea: false, // 初始不可调整
    };
  },
  methods: {
    onResizeEnd(layout) {
      // 当调整结束时，可以获取到新的尺寸信息
      const resizedItem = layout.find(item => item.isResized);
      if (resizedItem) {
        this.resizableArea = true; // 更新可调整状态
        // 根据新的尺寸调整内部组件
        this.updateInternalComponent(resizedItem);
      }
    },
  },
  mounted() {
    this.$refs.layout.init(VueGridLayout, {
      cellHeight: 'auto',
      isResizable: this.resizableArea,
      resizeHandle: ['e', 'w'], // 可调整边
      onResizeEnd: this.onResizeEnd,
    });
  },
};
</script>

2. `onResizeEnd`回调函数会在每次调整结束后触发，你可以在这里获取到调整后的布局数据，然后更新内部组件的样式或者其他依赖于大小的特性。

3. 更新内部组件部分（这里假设有个名为`innerComponent`的子组件需要跟随调整）：

updateInternalComponent(resizedItem) {
  const innerCompRef = this.$refs.innerComponent;
  if (innerCompRef && innerCompRef.$el) {
    innerCompRef.$el.style.width = `${resizedItem.size.x}px`;
    innerCompRef.$el.style.height = `${resizedItem.size.y}px`; // 如果有高度需求
  }
}