v-if not switching back after second change

I have this form that i need to switch to other component (currently the same with different label, don’t have it prepared yet) depends on true/false from select input.

<div v-if="form.is_one === true" class="pb-8 pr-6 w-full lg:w-5/6">
    <text-input v-model="form.name" :error="form.errors.name" label="Name 1" />
</div>
<div v-else class="pb-8 pr-6 w-full lg:w-5/6">
    <text-input v-model="form.name" :error="form.errors.name" label="Name 2" />
</div>
<select-input v-model="form.is_one" :error="form.errors.is_one" class="pb-8 pr-6 w-full lg:w-1/6" label="switch">
    <option value="true">yes</option>
    <option value="false">no</option>
</select-input>
{{ form.is_cc }}

Value is passed (by default true) in:

return {
    form: this.$inertia.form({
        name: null,
        is_one: true,
    }),
}

And while on page render it does render properly (true, label "Name 1"

And on first switch it changes as well, (false, label "Name 2"

On next change it does not changes back, as you can see below form the value changed to true

Can’t see what would be the error here, there is nothing in console.log about it. If there is a better solution to switching component i can try it.

>Solution :

<option value="true">

This option sets form.is_one value to string value "true", but your v-if checks for boolean true. You can bind boolean true/false to your <option> values and then your v-if will work

<option :value="true">yes</option>
<option :value="false">no</option>