NuxtJS (Vue.js) 谷歌地图和 v-if 内的自动完成一旦切换就不会显示，仅在初始页面加载时显示

设置一个非常简单的内部站点的基本功能，我有一个复选框来打开/关闭 div（默认为打开），该 div 内是 Google 地图和自动完成。

在初始页面加载 Google Maps & Autocomplete 时显示并成功运行，但是如果关闭并重新打开，页面要么是空白的，要么显示错误 getObj() 行为的屏幕记录：https://i.imgur.com/DhShl1s.mp4< /p>

ma​​in.vue：

Map: Expected mapDiv of type Element but was passed undefined.

ma​​ps.client.js：

<template>
  <div>
    Hi {{ username }}
    <input
      v-model="businessName"
      type="text"
      placeholder="Business Name"
    /><br /><br />

    In-store Address:<br />
    <input type="checkbox" @click="toggle()" />Not applicable<br /><br />
    <div v-if="instore">
      <input type="text" ref="citySearch" @changed="changed" /><br /><br />
      <div style="height:800px;width:800px" ref="map"></div>
      <br /><br />
    </div>
    <button type="button" @click="updateMap">Submit</button><br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      businessName: "",
      businessAddress: "",
      instore: true
    };
  },
  mounted() {
    this.$maps.makeAutoComplete(this.$refs.citySearch);
    this.$maps.showMap(this.$refs.map, -33.86, 151.2);
  },
  computed: {
    username() {
      return this.$store.state.username;
    }
  },
  methods: {
    toggle() {
      this.instore = !this.instore;
      this.$maps.makeAutoComplete(this.$refs.citySearch);
      this.$maps.showMap(this.$refs.map, -33.86, 151.2);
    },
    submit(e) {
      if (!this.businessName || !this.businessAddress) {
        return;
      }
      this.$store.commit("add_business", this.name, this.address);
    },
    updateMap() {
      this.$maps.showMap(this.$refs.map, this.lat, this.lng);
    },
    changed(event) {
      console.log(event);
      const place = event.detail;
      this.$maps.showMap(
        this.$refs.map,
        place.geometry.location.lat(),
        place.geometry.location.lng()
      );
    }
  }
};
</script>

非常感谢任何帮助，我对 Vue.JS 很陌生，谢谢。