Alpine.js – show/hide div based from select input values

I’m trying to show and hide div’s based from a select box selected value. I have my select boxes working so that it changes the value like so:

// x-data="{ week: false, day: false }

            <select @change="week = $event.target.value">
                <option x-bind:value="Week 1">Week 1</option>
                <option x-bind:value="Week 2">Week 2</option>
                <option x-bind:value="Week 3">Week 3</option>
            </select>
            <select @change="day = $event.target.value">
                <option x-bind:value="1">Monday</option>
                <option x-bind:value="2">Tuesday</option>
                <option x-bind:value="3">Wednesday</option>
                <option x-bind:value="4">Thursday</option>
                <option x-bind:value="5">Friday</option>
            </select>
            <span x-text="'option '+ week"></span>
            <span x-text="'option '+ day"></span>

I am then trying to show and hide divs based on the selections like so, but having no luck.

<div :class="week !== {{ $week['name'] }} ? 'hidden' : 'block'">
     <p>{{ $week['name'] }}</p>
</div>

How can I correctly set the class?