How can I change the column width of a table?

Question

Vue.js

I use this example jsfiddle.net/thrilleratplay/epcybL4v Until I caught up with why it doesn’t work for me.
As I understand it, a piece of code that forms the grip should be added to the dom?
Here is my sandbox, where I implemented it approximately https://codesandbox.io/s/pyvjxxnnvj
under the link "width change"
The code itself is located in /src/views/WidthTable.vue

medthods: {
mouseDown(e) {
      this.thElm = e.target.parentNode;
      this.startOffset = this.thElm.offsetWidth - e.pageX;
    },
    mouseMove(e) {
      if (this.thElm) {
        this.thElm.style.width = this.startOffset + e.pageX + "px";
      }
    },
setResize() {
      Array.prototype.forEach.call(
        document.querySelectorAll("table th"),
        th => {
          th.style.position = "relative";

          let grip = document.createElement("div");
          grip.innerHTML = " ";
          grip.style.top = 0;
          grip.style.right = 0;
          grip.style.bottom = 0;
          grip.style.width = "5px";
          grip.style.position = "absolute";
          grip.style.cursor = "col-resize";
          grip.addEventListener("mousedown", this.mouseDown);

          th.appendChild(grip);

          document.addEventListener("mousemove", this.mouseMove);

          document.addEventListener("mouseup", function() {
            this.hElm = undefined;
          });
        }
      );
},
created: function() {
    this.items = data;
    this.columns = column;
    for (let index in column) {
      let rowColumn = column[index];
      this.disabledColumnsData[rowColumn.name] = rowColumn.disabled;
    }
    this.setResize();
  }