我正在使用Vue-Multiselect，如果用户单击“重置”按钮，则无法理解如何重置vue-multiselect组件。

这是我的代码：Codesandbox

模板：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <CustomerSelect @selectedUser="customUser"/>
    <button type="button" @click="resetCustomQuery()">Reset</button>
  </div>
</template>

脚本：

<script>
import CustomerSelect from "@/components/CustomerSelect.vue";
export default {
  name: "HelloWorld",components: {
    CustomerSelect
  },props: {
    msg: String
  },data() {
    return {
      custom: {
        user_id: null
      }
    };
  },methods: {
    customUser(user) {
      this.custom.user_id = user.uid;
    },resetCustomQuery() {
      this.custom.user_id = ""; // <--- how to reset ??
    }
  }
};
</script>

CustomerSelect：

<template>
  <div>
    <multiselect
      id="user_last_name_input"
      v-model="user"
      :options="userProfiles"
      label="lastname"
      placeholder="Select or search for an existing user"
      track-by="uid"
      :close-on-select="true"
      @select="onSelect"
      :loading="isLoading"
      :custom-label="userSelectName"
      aria-describedby="searchHelpBlock"
      selectLabel
    >
      <template slot="singleLabel" slot-scope="props">
        {{ props.option.lastname }},{{ props.option.firstname }} &mdash;
        <small>{{ props.option.email }}</small>
      </template>
      <template slot="option" slot-scope="props">
        <strong>{{ props.option.lastname }}</strong>,{{ props.option.firstname }} &mdash;
        <small>{{ props.option.email }}</small>
        <small v-if="props.option.c_organization">,{{ props.option.c_organization }}</small>
      </template>
      <template slot="noResult">Looks like this user doesn't exist yet.</template>
    </multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import { mapState } from "vuex";
export default {
  components: { Multiselect },data() {
    return {
      user: "",isLoading: true
    };
  },async created() {
    // await this.$store.dispatch("fetchUserProfiles");
    this.isLoading = false;
  },methods: {
    //this determines what can be searched in the dropdown
    userSelectName(option) {
      return `${option.lastname},${option.firstname},${option.email}`;
    },// send the user object to IssueResponse.vue
    onSelect(userObj) {
      this.$emit("selectedUser",userObj);
    }
  },computed: {
    ...mapState(["userProfiles"])
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>