How to populate form with default values and x-model?

[xorock]

Lets say I have a simple form:

<form x-data="registerForm">
<input x-model.number.lazy="id" x-ref="id"
                           type="text" name="id" value="{$inputs.id}" placeholder="ID" required />
</form>

with corresponding JS

export default () => ({
  id: null,
})

Note that the input has its value filled on the server side (e.g. after submitting the form when an error is found and needs to be fixed). Unfortunately, the model takes precedence over the value and the field is empty. I also tried with :value. Is the only way to do it is to fill the data manually e.g. in the init method?

https://codepen.io/xorock/pen/bGWYWaQ