title: Fix dropdown auto open in tailwind ui navbar component with vue.js
body: <p>I use <a href="https://tailwindui.com/preview#component-70a9bdf83ef2c8568c5cddf6c39c2331" rel="noreferrer">navbar component</a> from tailwind ui. It's looks like something like this:</p>
  <pre><code>&lt;!-- Profile dropdown --&gt;
  &lt;div class=&quot;ml-3 relative&quot;&gt;
    &lt;div&gt;
      &lt;button
        class=&quot;flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out&quot;
        id=&quot;user-menu&quot;
        aria-label=&quot;User menu&quot;
        aria-haspopup=&quot;true&quot;
      &gt;
        &lt;img
          class=&quot;h-8 w-8 rounded-full&quot;
          src=&quot;https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot;
          alt
        /&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;!--
    Profile dropdown panel, show/hide based on dropdown state.
  
    Entering: &quot;transition ease-out duration-100&quot;
      From: &quot;transform opacity-0 scale-95&quot;
      To: &quot;transform opacity-100 scale-100&quot;
    Leaving: &quot;transition ease-in duration-75&quot;
      From: &quot;transform opacity-100 scale-100&quot;
      To: &quot;transform opacity-0 scale-95&quot;
    --&gt;
    &lt;div class=&quot;origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg&quot;&gt;
      &lt;div
        class=&quot;py-1 rounded-md bg-white shadow-xs&quot;
        role=&quot;menu&quot;
        aria-orientation=&quot;vertical&quot;
        aria-labelledby=&quot;user-menu&quot;
      &gt;
        &lt;a
          href=&quot;#&quot;
          class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out&quot;
          role=&quot;menuitem&quot;
        &gt;Your Profile&lt;/a&gt;
        &lt;a
          href=&quot;#&quot;
          class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out&quot;
          role=&quot;menuitem&quot;
        &gt;Settings&lt;/a&gt;
        &lt;a
          href=&quot;#&quot;
          class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out&quot;
          role=&quot;menuitem&quot;
        &gt;Sign out&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In this case when I run this code in vue.js navbar dropdown menu status is open by default. How can set status closed by defaul?</p>
  <p><strong>Here is preview:</strong></p>
  <p><a href="https://i.stack.imgur.com/6dCha.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6dCha.png" alt="enter image description here" /></a></p>