Laravel Livewire component PROPERTIES are empty inside a div class

I created a Flash livewire component, it works pretty fine bu I'm having a weird issue with a specific div when trying to change dynamically its class value it appears that the properties {$type and $colors} are empty (but only in that div, outside it's not empty), I'm not sure what is preventing those properties from being recognized! Please this is the blade file:

<div x-data="{ open: false }" @flash-message.window="open = true; setTimeout(() => open = false ,7000);">
    <div x-show="open" x-cloak class="border px-2 py-2 mb-2 rounded {{ $type ? $colors[$type] : '' }}" >
        {{ $type ? $colors[$type] : '' }}{{ $message }}
    </div>
</div>

the Flash class component :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Flash extends Component
{
    public $message;
    public $type;
    public $colors = [
        'error' => 'border-red-700 text-red-700 bg-red-200',
        'success' => 'border-green-700 text-green-700 bg-green-200',
        'warning' => 'border-orange-700 text-orange-700 bg-orange-200',
        'info' => 'border-blue-700 text-blue-700 bg-blue-200'
    ];
    protected $listeners = ['flash' => 'setFlashMessage'];

    /**
     * Set the message & type to be displayed on the event 
     *
     * @param string $message
     * @param string $type
     * @return void
     */
    public function setFlashMessage( $message,  $type)
    {
        $this->message = $message;
        $this->type = $type;

        $this->dispatchBrowserEvent('flash-message');
    }

    public function render()
    {   
        return view('livewire.flash');
    }
}

And it should be displaying the div styled as following: but in contrary it's displaying the model as following:

Can anyone check that code and find what's missing or what's wrong with it?

Thank you!