title: Creating Vue Component Dropdown with Popper Js
body: <p>I'm on progress to make a dropdown component with vue and popperjs. To be known i'm using <code>vuejs v.2.6.12</code> and <code>popperjs v.2.9.2</code> and here is the code <br></p>
  <pre><code>&lt;template&gt;
          &lt;button type=&quot;button&quot; @click=&quot;show = true&quot;&gt;
              &lt;slot /&gt;
              &lt;portal v-if=&quot;show&quot; to=&quot;dropdown&quot;&gt;
                  &lt;div&gt;
                      &lt;div
                          style=&quot;position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2&quot;
                          @click=&quot;show = false&quot;
                      /&gt;
                      &lt;div
                          ref=&quot;dropdown&quot;
                          style=&quot;position: absolute; z-index: 99999;&quot;
                          @click.stop=&quot;show = autoClose ? false : true&quot;
                      &gt;
                          &lt;slot name=&quot;dropdown&quot; /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/portal&gt;
          &lt;/button&gt;
      &lt;/template&gt;
      
      &lt;script&gt;
      import { createPopper } from &quot;@popperjs/core&quot;;
      
      export default {
          props: {
              placement: {
                  type: String,
                  default: &quot;bottom-end&quot;
              },
              boundary: {
                  type: String,
                  default: &quot;scrollParent&quot;
              },
              autoClose: {
                  type: Boolean,
                  default: true
              }
          },
          data() {
              return {
                  show: false
              };
          },
          watch: {
              show(show) {
                  if (show) {
                      this.$nextTick(() =&gt; {
                          this.popper = createPopper(this.$el, this.$refs.dropdown, {
                              placement: this.placement,
                              modifiers: [
                                  {
                                      name: &quot;preventOverflow&quot;,
                                      options: {
                                          boundary: this.boundary
                                      }
                                  }
                              ]
                          });
                      });
                  } else if (this.popper) {
                      setTimeout(() =&gt; this.popper.destroy(), 100);
                  }
              }
          },
          mounted() {
              document.addEventListener(&quot;keydown&quot;, e =&gt; {
                  if (e.keyCode === 27) {
                      this.show = false;
                  }
              });
          }
      };
      &lt;/script&gt;
  </code></pre>
  <p>When i'm trying to run the code, i get error message <code>Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.</code>
  I don't know why i got this error, i think i've put the reference <code>this.$el</code> and the popper <code>this.$refs.dropdown</code> on the right place.<br><br>
  Could anybody here to help me for solving this problem?<br>
  Thank You</p>