To achieve the desired outcome, you can modify the existing code in the following way:
<ul class="nav nav-tabs nav-cat">
@foreach($countries as $country)
<li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $country->id }})">{{ ucfirst($country->name) }}</a></li>
@endforeach
</ul>
By adding the class="active" attribute to the li tag within the loop, you will be able to activate it when the corresponding tab is clicked.
Make sure to implement this change to ensure the desired functionality.