There is an input component. Code below.

@props([
'disabled' => false,
'hidden' => false,
'type' => 'text',
'state' => null,
'borderClass' => ''
])

@php
switch ($state){
    case 'alert':
        $borderClass = 'border-2 border-red-600';
        break;
    case 'success':
        $borderClass = 'border-2 border-green-600';
        break;
}

@endphp

<input x-data="{
    borderClass: @js($borderClass),
    removeBorderClass() {

        // for testing
        document.querySelectorAll('[x-data]').forEach(el => {
            console.log(el);
        });
        console.log(document.getElementById('title'));
        // end for testing

        if (@js($borderClass)){
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}"
    x-ref="input"
    x-on:focus="removeBorderClass()"

    value = "{{ $slot ?? '' }}"
    type = "{{ $type }}"
    {{ $disabled ? 'disabled' : '' }}
    {{ $hidden ? 'hidden' : '' }}
    {{ $attributes->merge(['class' => 'focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300 ' . $borderClass]) }}
 >

After changing $state property and the $borderClass property, I get changes on the screen with border color, i.e. border-2 border-red-600 is added to DOM, but I don’t get any change for alpine when calling x-on:focus=removeBorderClass()

I have decided to test the result and implement console.log in method by using two different ways to get the same DOM element. 1. by ‘x-data’ selector and by ‘id’

    // for testing
    document.querySelectorAll('[x-data]').forEach(el => {
        console.log(el);
    });
    console.log(document.getElementById('title'));
    // end for testing

Here is the result from browser devtools. For

1.

document.querySelectorAll('[x-data]').forEach(el => {
                console.log(el);
            });

Result (only part for our input element):

<input x-data="{
    borderClass: '',
    removeBorderClass() {

        // for testing
        document.querySelectorAll('[x-data]').forEach(el => {
            console.log(el);
        });
        console.log(document.getElementById('title'));
        // end for testing

        if (''){
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}" x-ref="input" x-on:focus="removeBorderClass()" value="" type="text" class="focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300  w-full" style="margin-right: -2.75rem;" name="depth" wire:model.lazy="depth" placeholder="0" title="depth">

console.log(document.getElementById('title'));

Result:

<input x-data="{
    borderClass: 'border-2 border-red-600',
    removeBorderClass() {

        // for testing
        document.querySelectorAll('[x-data]').forEach(el => {
            console.log(el);
        });
        console.log(document.getElementById('title'));
        // end for testing

        if ('border-2 border-red-600'){
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}" x-ref="input" x-on:focus="removeBorderClass()" value="" type="text" class="focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300 border-2 border-red-600 w-full" wire:model.lazy="title" name="title" id="title">

Why they are different. Why while calling the same element get different results? How get changes with alpine?