А он должен открываться? Какая-то магия?
Если вы копируете код, то сначала разберитесь что к чему, а потом задавайте вопросы.
Теперь по делу:
При клике у вас должны меняться стили, которые отвечают за показ/скрытие меню. Добавьте это через
:class в вашем коде и будет вам счастье.
Что-то типо этого:
<!-- Dropdown menu -->
<div id="dropdown" class="z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" :class="show ? 'block' : 'hidden'">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
</li>
</ul>
</div>
Либо в :class можно поместить computed свойство, что даже лучше.
