Wire:model not working when input is in conditional template

I have an input field which sits inside a template. This input field is only displayed if the user selects “other” from another select element. I was able to use alpine.js to conditionally display the input field, but the wire:model does not seem to properly sync the input to my PHP class. I am using the same input component with inputs that are not in the template and they are working just fine.

Are you using the latest version of Livewire: Yes.

Do you have any screenshots or code examples:

<template x-if="showOtherInput">
    <x-input-section id="otherVenue" placeholder="Please Enter the Venue Name" />
</template>

My input-section component:

@props(['id', 'type' => 'text', 'required' => false, 'disabled' => false])

<div class="w-full md:w-5/6 mb-5">
    <input
        type="{{ $type }}"
        id="{{ $id }}"
        name="{{ $id }}"
        wire:model.defer="{{ $id }}"
        {!! $attributes->merge(['class' => 'appearance-none block w-full bg-gray-50 text-gray-700 border border-gray-200 py-5 px-6 leading-tight focus:outline-none focus:bg-white focus:border-gray-500']) !!}
        {{ $disabled ? 'disabled' : '' }} {{ $required ? 'required' : '' }} />
    @error($id)
        <p class="mt-2 text-sm leading-tight text-red-700">{{ $message }}</p>
    @enderror
</div>

Still fighting this same issue. Anyone else conditionally showing fields? Is there another approach I should take? Just to be sure, I pulled the x-input-section out of the <template> and it worked fine.

I ran across a similar issue. Solved by entangling the model property within x-data and using x-model within the input.