<c-vars value></c-vars>

<div
  x-data="{
    isSelected: false,
    isHovered: false,
    init() {
      this.isSelected = this.value === $root.value;
      this.$watch('$root.value', val => {
        this.isSelected = val === '{{ value }}';
      });
    }
  }"
  @mouseenter="isHovered = true; selectedIndex = items.indexOf($el)"
  @mouseleave="isHovered = false"
  @click.stop="
    $dispatch('item-selected', '{{ value }}');
    value = '{{ value }}';
  "
  x-bind:class="{ 'bg-accent text-accent-foreground