Replace v-model with v-bind:value and v-on:input for select-multiple

Sample code: https://codepen.io/graceoflives/pen/QWgqZPM
I tried to get 2-way binding with v-bind:value and v-on:input for select-multiple and there are some problems:

  • any attempt to change the associated variable with code causes the options to lose “selected” state (darker background)
  • any attempt to Shift + Select or Ctrl + Select options also causes the same thing

Those problems do not happen if I use v-model. But in some cases I want to use v-bind:value and v-on :input instead. How can I do that?

Well I didn’t understood much but 2-way data binding by vue eats up the ‘event’ and whenever u do some variable change on the focused element the two way binding unfocuses it (atleast in input and textarea).

sorry about that. I want to ask about the “selected” state (darker background), not the focus. I edited the question.