title: Reset select values in v-autocomplete, in order to add multiple items
body: <p>I'm creating an application that has a selection box to choose between some template data. However, the user should be able to select the same template option several times and, each time he selects the template, a new informational box appears in the screen.</p>
  <p>My problem is that the v-autocomplete component doesn't enable this kind of behavior: we can select one option (or multiple options), but not the same option twice.</p>
  <p>I thought about making something like this: every time the user selects the option A, the infobox would appear below and the component would reset to a empty option. Then, the user could choose option A again and, when he chooses it, another info box would appear, how many times the user needs it.</p>
  <p>How could I do something like this using vue? I didn't found any component that would do something like this on default, so I think I'll have to tweak the component behavior, but I don't know exactly where to start.</p>
  <p>My template:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;select-wrapper&quot; id=&quot;selectBox&quot;&gt;
      &lt;v-autocomplete
        class=&quot;select-input&quot;
        :items=&quot;items&quot;
        :name=&quot;label&quot;
        placeholder=&quot;select item&quot;
        solo
        :value=&quot;value&quot;
        @change=&quot;$event =&gt; onChange($event, items)&quot;
        item-text=&quot;name&quot;
        item-value=&quot;value&quot;
        :required=&quot;required&quot;
        :rules=&quot;[
          value =&gt;
            !required ||
            !!value ||
            &quot;required&quot;
        ]&quot;
      &gt;&lt;/v-autocomplete&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>And my Vue code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script lang=&quot;ts&quot;&gt;
  
  import { defineComponent } from &quot;@vue/composition-api&quot;;
  import Vue from &quot;vue&quot;;
  
  interface SelectItem {
      name: string,
      value: string
  }
  
  interface SelectBoxProps {
    items: SelectItem[];
    value: string;
    onSelect: ({ target }: { target?: SelectItem }) =&gt; void;
    hasResetSelection: boolean;
  }
  
  export default defineComponent({
    name: &quot;SelectBox&quot;,
    props: {
      label: String,
      items: Array,
      value: [String, Number],
      onSelect: Function,
      disabled: Boolean,
      required: {
        type: Boolean,
        default: false
      },
      hasError: Boolean,
      errorMessage: String,
      hasResetSelection: {
        type: Boolean,
        default: false
      }
    },
    directives: {
      ClickOutside
    },
    setup({ onSelect, hasResetSelection }: SelectBoxProps) {
      const onChange = (selectedValue: string, itemsArr: SelectItem[]) =&gt; {
        const targetItem = itemsArr.find(i =&gt; i.value === selectedValue);
  
        if (hasResetSelection) {
          Vue.nextTick(() =&gt; {
            console.log(&quot;onselect should reset value&quot;);
            return onSelect({ target: { name: &quot;&quot;, value: &quot;&quot; } });
          });
        }
        return onSelect({ target: targetItem });
      };
  
      return {
        onChange
      };
    }
  });
  &lt;/script&gt;
  </code></pre>
  <p>This was my last attempt with <strong>Vue.nextTick</strong>, I already tried to tweak the component with <strong>ref()</strong> and it didn't work as well. Do you have any suggestions?</p>