Changing fields updates livewire @entangle field

Question

I have a component that is entangling a livewire property.

<div x-data="{show: @entangle($attributes->wire('model'))}>
    <form>
        <input type="checkbox" wire:model.defer="story.show_name" name="show_name" />
    </form>
</div>

I have a form within this component. If I update any field within the form it will send an update to the server bug it also modifies the wire:model. An example would be a checkbox. If I uncheck it then the component hides.

Example:

[
  {
    "type": "syncInput",
    "payload": {
      "name": "story.show_name",
      "value": false
    }
  },
  {
    "type": "syncInput",
    "payload": {
      "name": "show",
      "value": false
    }
  }
]

Any idea why this would suddenly be capturing all input/change events?

Answer 1

The problem was due to me adding all attributes to the component like so {{$attributes}}. This would add wire:model="show" to the element. Since my component wasn't an input field and just a div it would then accept all input events.

I replaced {{$attributes}} with {{$attributes->except('wire:model')}} to fix the problem.