What is the best practice for resizing vega lite graph?

[mapringg]

The code below allows me to resize, but it fails if I use any graph that have a column property. Also, I feel like my current method is very hacky and may not be the correct method for resizing.

const [spec, setSpec] = useState({
  height: 'container',
  width: 'container',
  mark: {
    type: 'bar',
  },
  encoding: {
    // column: { field: 'brand', type: 'nominal', title: null },
    y: {
      field: 'sov',
      type: 'quantitative',
      title: null,
    },
    x: { field: 'date', type: 'ordinal', timeUnit: 'utcmonth', title: null },
    color: { field: 'brand', type: 'nominal' },
  },
  data: {
    name: 'multi',
  },
})

useEffect(() => {
  setSpec({ ...spec, height: size.height, width: size.width })
}, [size])

const handleResize = (e, data) => {
  const { width, height } = data.size
  setSize({
    width,
    height,
  })
}

<ResizableBox
  width={size.width}
  height={size.height}
  onResize={handleResize}
  >
  <VegaLite
      spec={spec}
      data={data}
      actions={false}
  />
</ResizableBox>

Update: Updating the width and height props of the vega lite component does not trigger a rerender, but an update to spec does.

[PhML]

I use a similar method with Vega component and have similar issue when I use vconcat oh hconcat in a vega-lite spec. @mapringg as a workaround I replace my Vega-Lite spec with its Vega compiled version (with a Vega component you can use either Vega or Vega-Lite spec). Surprisingly, resizing is then possible.

[domoritz]

Vega-Lite just compiles to Vega so the behavior should be exactly the same.