Vue-cli project, need to encapsulate keyword prompt map component,

this effect, however, after the component is introduced, only the map is displayed, and the input box search has no effect

mounted(){
        this.$nextTick(() => {
          var th = this
          // Map
          var map = new BMap.Map("allmap1");
          // ,
          // var point = new BMap.Point(121.160724,31.173277); // 
          map.centerAndZoom("", 15);
          map.enableScrollWheelZoom();
          var ac = new BMap.Autocomplete(    //
            {
              "input": "suggestId"
              , "location": map
            })
          console.log(ac)
          var myValue
          ac.addEventListener("onconfirm", function (e) {    //
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            this.address_detail = myValue
            setPlace();
          });

          function setPlace() {
            map.clearOverlays();    //
            function myFun() {
              th.userlocation = local.getResults().getPoi(0).point;    //
              map.centerAndZoom(th.userlocation, 18);
              map.addOverlay(new BMap.Marker(th.userlocation));    //
            }

            var local = new BMap.LocalSearch(map, { //
              onSearchComplete: myFun
            });
            local.search(myValue);

            //
            map.addEventListener("click",function(e){
              //
              console.log(th.userlocation.lng);
              //
              console.log(th.userlocation.lat);

            })
          }
        })
      }

ask for the answer of the Great God.