The horror.

The dropdown example

  <div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm">
    <button @click="open=!open" class="bg-white rounded-md shadow-sm cursor-pointer">
        <span class="block px-4 py-2">Dropdown</span>
    </button>
    <ul x-show="open" class="absolute origin-top-left top-0 w-32 p-4 mt-10 bg-white rounded-md shadow-sm" x-transition x-cloak>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
    </ul>
  </div>

It would also totally collide with Vue's template syntax.