openlayers+vue的bug

使用addInteraction添加交互draw绘制，预期removeInteraction删除交互draw绘制时不再绘制，但是删除绘制不起作用，各种找原因，结果把data中的map变量注释掉即可，原因未知。

<template>
  <div>
    <div id="map" style="position:absolute;width:100vw;height:100vh">
    </div>
    <div style="position: absolute; left: 50px; top:10px">
      <el-button @click="addInteractions">绘制</el-button>
      <el-button @click="removeInteractions">取消</el-button>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>

import "ol/ol.css";
import GeoJSON from 'ol/format/GeoJSON'
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import { Select, Modify, Draw, Snap } from 'ol/interaction';
import { Tile, Vector as VectorLayer } from 'ol/layer'
import { Point } from 'ol/geom'
import { XYZ, TileWMS, Vector as VectorSource } from 'ol/source'
import MapOne from '@/components/MapOne/index.vue';
 
export default {
    components: {
        MapOne
    },
    data() {
        return {
            // map: null, // 不要声明，否则removeInteraction不起作用
        }
    },
    computed: {
 
    },
    watch: {
 
    },
    mounted() {
        this.initMap()
    },
    created() {
 
    },
    methods: {
        initMap() {
            this.map = new Map({
                target: "map",
                view: new View({
                    center: fromLonLat([113.53450137499999, 34.44104525]),
                    zoom: 5
                }),
                layers: [
                    new TileLayer({
                        source: new XYZ({
                            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                        }),
                    }),
                ],
            });
 
            this.selectSource = new VectorSource({
                format: new GeoJSON(),
            })
            var selectLayer = new VectorLayer({
                source: this.selectSource,
            })
            this.map.addLayer(selectLayer)
        },
        addInteractions() {
            this.select = new Select({
                wrapX: false,
            });
            this.modify = new Modify({
                features: this.select.getFeatures(),
            });
            this.draw = new Draw({
                type: 'Polygon',
                source: this.selectSource,
            });
            this.snap = new Snap({
                source: this.selectSource,
            });
            this.changeInteractions('draw')
        },
        removeInteractions() {
            this.map.removeInteraction(this.modify);
            this.map.removeInteraction(this.select);
            this.map.removeInteraction(this.draw);
            this.map.removeInteraction(this.select);
        },
        changeInteractions(value) {
            this.removeInteractions();
            switch (value) {
                case 'draw': {
                    this.map.addInteraction(this.draw);
                    this.map.addInteraction(this.snap);
                    break;
                }
                case 'modify': {
                    this.map.addInteraction(this.select);
                    this.map.addInteraction(this.modify);
                    this.map.addInteraction(this.snap);
                    break;
                }
                default: {
                    // pass
                }
            }
        },
    }
}