Vue binding value to input

Question

I have a loop of inputs

<li v-for="role in ...">
    {{-some html-}}
</li>

and have input inside

<input type="text" :data-some="role.name" :value="role.name" name="name" ....>

And I can bind it to any attribute (for example to data-some) but I cant bind it to value attribute. Why and how I can solve this?

I can`t do this by

value="{{role.name}}" 

since it deprecated

And I dnt want to create another data and use v-model, coz I only need to output value

This is what I get:

As you can see role.name has been bound to custom attr "data-some" and value - dont exists at all.

Answer 1

I figure out with this. Issue - that part was cloned by me into another location via

var divWithReactiveInput = document.querySelector('.someclass')
document.querySelector('.someclass').innerHtml = divWithReactiveInput.innerHtml

And I expected same reactive behaviour as on original elem.

Ofc, this wont work.