Programatically set width/height of GridItems

Hey.

For example, can we set the GridItem’s width + 1 and it work as if we were resizing? I have the code:

...
data () {
    return {
      layout: [
            {"x":0,"y":0,"w":4,"h":2,"i":"0"},
  	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
  	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
  	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
  	    {"x":8,"y":0,"w":2,"h":3,"i":"4"}
      ],
      cols: 12
    }
  },
methods: {
    enlarge: function(index) {
      this.layout = this.layout.map((g, i)=>{
        if(i === index) {
          //Increase the width of the grid item by 1 at the index given
          return {...g, w: g.w + 1}
        } else {
          return g
        }
      });
    }
  }
...

When I increase it, it works the first time, but if I click the button again it keeps increasing and wont push any other grid items accordingly.

[SergeyKhval]

@pxljoy I managed to solve this by triggering resizeEvent on gridLayout

see updated fiddle here

[pxljoy]

This is similar to my use case. I need to increase the width and minimum width of the component on demand.

If you have any other suggestions tell me 😄