@push and @stack not working as expected

I have a simple page with @stack('head-tag') and @stack('scripts'):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @stack('head-tag')
</head>
<body>
    <x-com />

    @stack('scripts')
</body>
</html>

Inside of com component:

@push('scripts')
    <script>alert(3)</script>
@endpush

@push('head-tag')
    <script>alert(2)</script>
@endpush

But when I load the page the there is nothing inside of head-tag stack:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
    
        <script>alert(3)</script>
</body>
</html>

Please or to participate in this conversation.