Vue+Openlayer uses modify to modify the complete code of the element

 // Modify the feature core code modifyFeature() {
      this.modify = new Modify({
        source: this.lineStringLayer.getSource(),
      });
      this.map.addInteraction(this.modify);
    },

<template>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
 
import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default {
  data() {
    return {
      map: {},
      lineStringLayer: {},
      modify: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.addLayer();
    this.modifyFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers:
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.2979180563, 30.528298024],
          zoom: 18,
        }),
      });
    },
    addLayer() {
      this.lineStringLayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.lineStringLayer.getSource().addFeature(
        new Feature({
          geometry: new LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ]),
        })
      );
      this.map.addLayer(this.lineStringLayer);
    },
    // Modify the feature core code modifyFeature() {
      this.modify = new Modify({
        source: this.lineStringLayer.getSource(), //Source is used here
      });
      this.map.addInteraction(this.modify);
    },
  },
};
</script>

modifyFeature() {
      this.modify = new Modify({
        //Note: Be sure to use the features attribute here, not source! ! ! !
        features: this.select.getFeatures(),
      });
      this.map.addInteraction(this.modify);
    },

<template>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource, XYZ } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
 
import Select from "ol/interaction/Select";
 
import { Point, LineString, Polygon } from "ol/geom";
import { Modify } from "ol/interaction";
export default {
  data() {
    return {
      map: {},
      lineStringLayer: {},
      draw: {},
      modify: {},
      select: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.pointerMove();
    this.addLayer();
    this.selectFeature();
    this.modifyFeature();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers:
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.2979180563, 30.528298024],
          zoom: 18,
        }),
      });
    },
    pointerMove() {
      this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
      });
    },
    addLayer() {
      this.lineStringLayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.lineStringLayer.getSource().addFeature(
        new Feature({
          geometry: new LineString([
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
          ]),
        })
      );
      this.map.addLayer(this.lineStringLayer);
    },
    selectFeature() {
      this.select = new Select();
      this.map.addInteraction(this.select);
    },
    modifyFeature() {
      this.modify = new Modify({
        //Note: Be sure to use the features attribute here, not source! ! ! !
        features: this.select.getFeatures(),
      });
      this.map.addInteraction(this.modify);
    },
  },
};
</script>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Modify Feature</title>
<link rel="stylesheet" href="../theme/default/style.css" rel="external nofollow" rel="external nofollow" type="text/css">
<link rel="stylesheet" href="style.css" rel="external nofollow" rel="external nofollow" type="text/css">
<style type="text/css">

</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var maps, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

vectors = new OpenLayers.Layer.Vector("Vector Layer");

var geometry = OpenLayers.Geometry.fromWKT(
'POLYGON((110 20,120 20,120 10,110 10,110 20),(112 17,118 18,118 16,112 15,112 17))'
);

vectors.addFeatures([new OpenLayers.Feature.Vector(geometry)]);

map.addLayers([wms, vectors]);
//Draw graphics controls = new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon);

map.addControl(controls);
controls.activate();
map.setCenter(new OpenLayers.LonLat(110, 20), 3);
}

function update() {
// Modify controls.deactivate();
controls = new OpenLayers.Control.ModifyFeature(vectors);
map.addControl(controls);
controls.activate();

}

function deactivate(){
controls.deactivate();
}

</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
<div><input type = "button" value = "Modify" onclick = "update()"/>
<input type = "button" value = "Cancel" onclick = "deactivate()"/>
</div>
</body>
</html>